fix #2304 component props can be string, explicit imports in tests

.changeset/wicked-sloths-travel.md

@@ -0,0 +1,5 @@
+---
+"solid-js": patch
+---
+
+fix #2304 component props can be string, explicit imports in tests

packages/solid/src/render/component.ts

@@ -21,51 +21,53 @@ export function enableHydration() {
  * A general `Component` has no implicit `children` prop.  If desired, you can
  * specify one as in `Component<{name: String, children: JSX.Element}>`.
  */
-export type Component<P = {}> = (props: P) => JSX.Element;
+export type Component<P extends Record<string, any> = {}> = (props: P) => JSX.Element;
 
 /**
  * Extend props to forbid the `children` prop.
  * Use this to prevent accidentally passing `children` to components that
  * would silently throw them away.
  */
-export type VoidProps<P = {}> = P & { children?: never };
+export type VoidProps<P extends Record<string, any> = {}> = P & { children?: never };
 /**
  * `VoidComponent` forbids the `children` prop.
  * Use this to prevent accidentally passing `children` to components that
  * would silently throw them away.
  */
-export type VoidComponent<P = {}> = Component<VoidProps<P>>;
+export type VoidComponent<P extends Record<string, any> = {}> = Component<VoidProps<P>>;
 
 /**
  * Extend props to allow an optional `children` prop with the usual
  * type in JSX, `JSX.Element` (which allows elements, arrays, functions, etc.).
  * Use this for components that you want to accept children.
  */
-export type ParentProps<P = {}> = P & { children?: JSX.Element };
+export type ParentProps<P extends Record<string, any> = {}> = P & { children?: JSX.Element };
 /**
  * `ParentComponent` allows an optional `children` prop with the usual
  * type in JSX, `JSX.Element` (which allows elements, arrays, functions, etc.).
  * Use this for components that you want to accept children.
  */
-export type ParentComponent<P = {}> = Component<ParentProps<P>>;
+export type ParentComponent<P extends Record<string, any> = {}> = Component<ParentProps<P>>;
 
 /**
  * Extend props to require a `children` prop with the specified type.
  * Use this for components where you need a specific child type,
  * typically a function that receives specific argument types.
  * Note that all JSX <Elements> are of the type `JSX.Element`.
  */
-export type FlowProps<P = {}, C = JSX.Element> = P & { children: C };
+export type FlowProps<P extends Record<string, any> = {}, C = JSX.Element> = P & { children: C };
 /**
  * `FlowComponent` requires a `children` prop with the specified type.
  * Use this for components where you need a specific child type,
  * typically a function that receives specific argument types.
  * Note that all JSX <Elements> are of the type `JSX.Element`.
  */
-export type FlowComponent<P = {}, C = JSX.Element> = Component<FlowProps<P, C>>;
+export type FlowComponent<P extends Record<string, any> = {}, C = JSX.Element> = Component<
+  FlowProps<P, C>
+>;
 
 /** @deprecated: use `ParentProps` instead */
-export type PropsWithChildren<P = {}> = ParentProps<P>;
+export type PropsWithChildren<P extends Record<string, any> = {}> = ParentProps<P>;
 
 export type ValidComponent = keyof JSX.IntrinsicElements | Component<any> | (string & {});
 
@@ -89,7 +91,10 @@ export type ComponentProps<T extends ValidComponent> = T extends Component<infer
  */
 export type Ref<T> = T | ((val: T) => void);
 
-export function createComponent<T>(Comp: Component<T>, props: T): JSX.Element {
+export function createComponent<T extends Record<string, any>>(
+  Comp: Component<T>,
+  props: T
+): JSX.Element {
   if (hydrationEnabled) {
     if (sharedConfig.context) {
       const c = sharedConfig.context;

packages/solid/store/test/modifiers.spec.ts

@@ -1,5 +1,14 @@
-import { createRoot, createSignal, createEffect } from "../../src";
-import { createStore, createMutable, reconcile, produce, unwrap, modifyMutable } from "../src";
+import { describe, expect, test } from "vitest";
+
+import { createRoot, createSignal, createEffect } from "../../src/index.js";
+import {
+  createStore,
+  createMutable,
+  reconcile,
+  produce,
+  unwrap,
+  modifyMutable
+} from "../src/index.js";
 
 describe("setState with reconcile", () => {
   test("Reconcile a simple object", () => {

packages/solid/store/test/mutable.spec.ts

@@ -1,6 +1,7 @@
-import { createRoot, createSignal, createMemo, batch, createEffect } from "../../src";
-import { Accessor, Setter } from "../../types";
-import { createMutable, unwrap, $RAW } from "../src";
+import { describe, expect, test } from "vitest";
+import { createRoot, createSignal, createMemo, batch, createEffect } from "../../src/index.js";
+import { Accessor, Setter } from "../../types/index.js";
+import { createMutable, unwrap, $RAW } from "../src/index.js";
 
 test("Object.create(null) is allowed", () => {
   const user = createMutable(Object.assign(Object.create(null), { name: "John" }));

packages/solid/store/test/mutableWithClass.spec.tsx

@@ -1,5 +1,6 @@
-import { createEffect, createRoot } from "../../src";
-import { createMutable } from "../src";
+import { describe, expect, test } from "vitest";
+import { createEffect, createRoot } from "../../src/index.js";
+import { createMutable } from "../src/index.js";
 
 describe("Class Operator test", () => {
   test("read and set class", () => {

packages/solid/store/test/store.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import {
   createRoot,
   createSignal,
@@ -7,8 +8,8 @@ import {
   on,
   untrack,
   mapArray
-} from "../../src";
-import { createStore, unwrap, $RAW, NotWrappable } from "../src";
+} from "../../src/index.js";
+import { createStore, unwrap, $RAW, NotWrappable } from "../src/index.js";
 
 describe("State immutability", () => {
   test("Setting a property", () => {

packages/solid/test/array.spec.ts

@@ -1,4 +1,5 @@
-import { mapArray, indexArray, createSignal, createMemo, createRoot } from "../src";
+import { describe, expect, test } from "vitest";
+import { mapArray, indexArray, createSignal, createMemo, createRoot } from "../src/index.js";
 
 describe("Map operator", () => {
   test("simple mapArray", () => {

packages/solid/test/component.bench.ts

@@ -1,5 +1,5 @@
-import { mergeProps, splitProps } from "../src";
-import { bench } from "vitest";
+import { mergeProps, splitProps } from "../src/index.js";
+import { bench, describe } from "vitest";
 
 const staticDesc = {
   value: 1,

packages/solid/test/component.spec.ts

@@ -1,13 +1,15 @@
+import { describe, expect, it, test } from "vitest";
 import {
   createRoot,
   createComponent,
   mergeProps,
   splitProps,
   createUniqueId,
   createSignal,
-  createEffect
-} from "../src";
-import { createStore } from "../store/src";
+  createEffect,
+  JSX
+} from "../src/index.js";
+import { createStore } from "../store/src/index.js";
 
 type SimplePropTypes = {
   a?: string | null;
@@ -41,7 +43,7 @@ describe("CreateComponent", () => {
     createRoot(() => {
       const nonObjects = [null, undefined, false];
       nonObjects.forEach(nonObject => {
-        const out = createComponent(p => p, nonObject);
+        const out = createComponent(p => p as JSX.Element, nonObject as any);
         expect(out).toEqual({});
       });
     });

packages/solid/test/component.type-tests.ts

@@ -1,4 +1,4 @@
-import { mergeProps, splitProps } from "../src";
+import { mergeProps, splitProps } from "../src/index.js";
 
 type Assert<T extends true> = never;
 // from: https://github.com/Microsoft/TypeScript/issues/27024#issuecomment-421529650

packages/solid/test/dev.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test, vi } from "vitest";
 import {
   createRoot,
   getOwner,
@@ -7,9 +8,9 @@ import {
   DEV,
   createContext,
   createComponent
-} from "../src";
-import type { DevComponent } from "../src/reactive/signal";
-import { createStore, unwrap, DEV as STORE_DEV } from "../store/src";
+} from "../src/index.js";
+import type { DevComponent } from "../src/reactive/signal.js";
+import { createStore, unwrap, DEV as STORE_DEV } from "../store/src/index.js";
 
 describe("Dev features", () => {
   test("Signals being added to sourceMap with user-provided names", () => {

packages/solid/test/external-source.spec.ts

@@ -1,4 +1,5 @@
-import { createRoot, createMemo, untrack, enableExternalSource } from "../src";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createRoot, createMemo, untrack, enableExternalSource } from "../src/index.js";
 
 import "./MessageChannel";
 

packages/solid/test/observable.spec.ts

@@ -1,4 +1,5 @@
-import { createRoot, createSignal, from, observable } from "../src";
+import { describe, expect, test, vi } from "vitest";
+import { createRoot, createSignal, from, observable } from "../src/index.js";
 
 describe("Observable operator", () => {
   test("to observable", () => {

packages/solid/test/resource.spec.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import {
   createRoot,
   createSignal,
@@ -8,9 +9,9 @@ import {
   ResourceFetcherInfo,
   Signal,
   createMemo
-} from "../src";
+} from "../src/index.js";
 
-import { createStore, reconcile, ReconcileOptions, Store, unwrap } from "../store/src";
+import { createStore, reconcile, ReconcileOptions, Store, unwrap } from "../store/src/index.js";
 
 describe("Simulate a dynamic fetch", () => {
   let resolve: (v: string) => void,

packages/solid/test/resource.type-tests.ts

@@ -1,5 +1,5 @@
-import { createResource, ResourceReturn, createSignal, Resource, Setter } from "../src";
-import { InitializedResource, InitializedResourceReturn } from "../src/reactive/signal";
+import { createResource, ResourceReturn, createSignal, Resource, Setter } from "../src/index.js";
+import { InitializedResource, InitializedResourceReturn } from "../src/reactive/signal.js";
 
 type Assert<T extends true> = T;
 // https://github.com/Microsoft/TypeScript/issues/27024#issuecomment-421529650

packages/solid/test/scheduler.spec.ts

@@ -1,5 +1,6 @@
 /** @vitest-environment jsdom */
-import { cancelCallback, requestCallback } from "../src";
+import { describe, expect, test } from "vitest";
+import { cancelCallback, requestCallback } from "../src/index.js";
 import "./MessageChannel";
 
 describe("requestCallback basics", () => {

packages/solid/test/signals.memo.spec.ts

@@ -1,4 +1,5 @@
-import { createRoot, createSignal, createMemo, Accessor } from "../src";
+import { describe, expect, it } from "vitest";
+import { createRoot, createSignal, createMemo, Accessor } from "../src/index.js";
 
 describe("createMemo", () => {
   describe("executing propagating", () => {

packages/solid/test/signals.spec.ts

@@ -1,4 +1,5 @@
 /** @vitest-environment jsdom */
+import { describe, expect, test } from "vitest";
 import {
   createRoot,
   createSignal,
@@ -18,7 +19,7 @@ import {
   useContext,
   getOwner,
   runWithOwner
-} from "../src";
+} from "../src/index.js";
 
 import "./MessageChannel";
 

packages/solid/test/signals.type-tests.ts

@@ -9,8 +9,7 @@ import {
   createSelector,
   Signal,
   Setter
-  // } from "../types/index";
-} from "../src";
+} from "../src/index.js";
 
 class Animal {
   #animal = null;

packages/solid/web/test/context.spec.tsx

@@ -2,9 +2,10 @@
  * @jsxImportSource solid-js
  * @vitest-environment jsdom
  */
+import { describe, expect, it } from "vitest";
 
-import { createContext, useContext } from "../../src";
-import { render, Show } from "../src";
+import { createContext, useContext } from "../../src/index.js";
+import { render, Show } from "../src/index.js";
 
 describe("Testing Context", () => {
   const ThemeContext = createContext("light");

packages/solid/web/test/dynamic.spec.tsx

@@ -2,10 +2,10 @@
  * @jsxImportSource solid-js
  * @vitest-environment jsdom
  */
-
-import { createRoot, createSignal, Component, JSX } from "../../src";
-import { createStore } from "../../store/src";
-import { Dynamic } from "../src";
+import { describe, expect, test, beforeEach, afterEach } from "vitest";
+import { createRoot, createSignal, Component, JSX } from "../../src/index.js";
+import { createStore } from "../../store/src/index.js";
+import { Dynamic } from "../src/index.js";
 
 describe("Testing Dynamic control flow", () => {
   let div: HTMLDivElement, disposer: () => void;

packages/solid/web/test/element.spec.tsx

@@ -2,8 +2,8 @@
  * @jsxImportSource solid-js
  * @vitest-environment jsdom
  */
-
-import { createRoot, createSignal, createUniqueId, JSX, children } from "../../src";
+import { describe, expect, test } from "vitest";
+import { createRoot, createSignal, createUniqueId, JSX, children } from "../../src/index.js";
 
 declare module "solid-js/jsx-runtime" {
   namespace JSX {

packages/solid/web/test/errorboundary.spec.tsx

@@ -2,9 +2,9 @@
  * @jsxImportSource solid-js
  * @vitest-environment jsdom
  */
-
-import { createRoot, resetErrorBoundaries } from "../../src";
-import { ErrorBoundary } from "../src";
+import { describe, expect, test } from "vitest";
+import { createRoot, resetErrorBoundaries } from "../../src/index.js";
+import { ErrorBoundary } from "../src/index.js";
 
 describe("Testing ErrorBoundary control flow", () => {
   let div: HTMLDivElement, disposer: () => void;

packages/solid/web/test/for.spec.tsx

@@ -2,9 +2,9 @@
  * @jsxImportSource solid-js
  * @vitest-environment jsdom
  */
-
-import { createRoot, createSignal } from "../../src";
-import { insert, For } from "../src";
+import { describe, expect, test } from "vitest";
+import { createRoot, createSignal } from "../../src/index.js";
+import { insert, For } from "../src/index.js";
 
 describe("Testing an only child each control flow", () => {
   let div: HTMLDivElement, disposer: () => void;

packages/solid/web/test/index.spec.tsx

@@ -2,9 +2,9 @@
  * @jsxImportSource solid-js
  * @vitest-environment jsdom
  */
-
-import { createRoot, createSignal } from "../../src";
-import { insert, Index } from "../src";
+import { describe, expect, test } from "vitest";
+import { createRoot, createSignal } from "../../src/index.js";
+import { insert, Index } from "../src/index.js";
 
 describe("Testing an only child each control flow", () => {
   let div: HTMLDivElement, disposer: () => void;

packages/solid/web/test/portal.spec.tsx

@@ -2,9 +2,9 @@
  * @jsxImportSource solid-js
  * @vitest-environment jsdom
  */
-
-import { createSignal } from "../../src";
-import { render, clearDelegatedEvents, Portal, Show } from "../src";
+import { describe, expect, test } from "vitest";
+import { createSignal } from "../../src/index.js";
+import { render, clearDelegatedEvents, Portal, Show } from "../src/index.js";
 
 describe("Testing a simple Portal", () => {
   let div = document.createElement("div"),

packages/solid/web/test/server-mock.spec.tsx

@@ -1,4 +1,5 @@
-import { renderToString, renderToStringAsync, renderToStream } from "../src/server-mock";
+import { expect, test, vi, beforeEach, afterAll } from "vitest";
+import { renderToString, renderToStringAsync, renderToStream } from "../src/server-mock.js";
 
 const origConsoleError = console.error;
 const mockConsoleError = vi.fn();

packages/solid/web/test/show.spec.tsx

@@ -2,9 +2,9 @@
  * @jsxImportSource solid-js
  * @vitest-environment jsdom
  */
-
-import { createRoot, createSignal } from "../../src";
-import { Show } from "../src";
+import { describe, expect, test } from "vitest";
+import { createRoot, createSignal } from "../../src/index.js";
+import { Show } from "../src/index.js";
 
 describe("Testing an only child show control flow", () => {
   let div: HTMLDivElement, disposer: () => void;