diff --git a/.changeset/wicked-sloths-travel.md b/.changeset/wicked-sloths-travel.md
new file mode 100644
index 000000000..67ae4abcb
--- /dev/null
+++ b/.changeset/wicked-sloths-travel.md
@@ -0,0 +1,5 @@
+---
+"solid-js": patch
+---
+
+fix #2304 component props can be string, explicit imports in tests
diff --git a/packages/solid/src/render/component.ts b/packages/solid/src/render/component.ts
index f90782f60..83bc7a329 100644
--- a/packages/solid/src/render/component.ts
+++ b/packages/solid/src/render/component.ts
@@ -21,33 +21,33 @@ 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
= (props: P) => JSX.Element;
+export type Component
= {}> = (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 & { children?: never };
+export type VoidProps
= {}> = 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
= Component>;
+export type VoidComponent = {}> = Component>;
/**
* 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 & { children?: JSX.Element };
+export type ParentProps
= {}> = 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
= Component>;
+export type ParentComponent = {}> = Component>;
/**
* Extend props to require a `children` prop with the specified type.
@@ -55,17 +55,19 @@ export type ParentComponent = Component>;
* typically a function that receives specific argument types.
* Note that all JSX are of the type `JSX.Element`.
*/
-export type FlowProps = P & { children: C };
+export type FlowProps
= {}, 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 are of the type `JSX.Element`.
*/
-export type FlowComponent = Component>;
+export type FlowComponent = {}, C = JSX.Element> = Component<
+ FlowProps
+>;
/** @deprecated: use `ParentProps` instead */
-export type PropsWithChildren
= ParentProps
;
+export type PropsWithChildren
= {}> = ParentProps
;
export type ValidComponent = keyof JSX.IntrinsicElements | Component | (string & {});
@@ -89,7 +91,10 @@ export type ComponentProps = T extends Component = T | ((val: T) => void);
-export function createComponent(Comp: Component, props: T): JSX.Element {
+export function createComponent>(
+ Comp: Component,
+ props: T
+): JSX.Element {
if (hydrationEnabled) {
if (sharedConfig.context) {
const c = sharedConfig.context;
diff --git a/packages/solid/store/test/modifiers.spec.ts b/packages/solid/store/test/modifiers.spec.ts
index 2cbb58d2d..2ca8592f0 100644
--- a/packages/solid/store/test/modifiers.spec.ts
+++ b/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", () => {
diff --git a/packages/solid/store/test/mutable.spec.ts b/packages/solid/store/test/mutable.spec.ts
index 507abc4a6..8cd1241da 100644
--- a/packages/solid/store/test/mutable.spec.ts
+++ b/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" }));
diff --git a/packages/solid/store/test/mutableWithClass.spec.tsx b/packages/solid/store/test/mutableWithClass.spec.tsx
index e5b379eca..bfc1bc404 100644
--- a/packages/solid/store/test/mutableWithClass.spec.tsx
+++ b/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", () => {
diff --git a/packages/solid/store/test/store.spec.ts b/packages/solid/store/test/store.spec.ts
index 0e2df2309..6fc6e28c1 100644
--- a/packages/solid/store/test/store.spec.ts
+++ b/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", () => {
diff --git a/packages/solid/test/array.spec.ts b/packages/solid/test/array.spec.ts
index 6bcff4b60..91b809c26 100644
--- a/packages/solid/test/array.spec.ts
+++ b/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", () => {
diff --git a/packages/solid/test/component.bench.ts b/packages/solid/test/component.bench.ts
index c9b6490c1..fd7fd00c3 100644
--- a/packages/solid/test/component.bench.ts
+++ b/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,
diff --git a/packages/solid/test/component.spec.ts b/packages/solid/test/component.spec.ts
index a8a70558a..1d4424932 100644
--- a/packages/solid/test/component.spec.ts
+++ b/packages/solid/test/component.spec.ts
@@ -1,3 +1,4 @@
+import { describe, expect, it, test } from "vitest";
import {
createRoot,
createComponent,
@@ -5,9 +6,10 @@ import {
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({});
});
});
diff --git a/packages/solid/test/component.type-tests.ts b/packages/solid/test/component.type-tests.ts
index bfe1067c8..39ee346ed 100644
--- a/packages/solid/test/component.type-tests.ts
+++ b/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 = never;
// from: https://github.com/Microsoft/TypeScript/issues/27024#issuecomment-421529650
diff --git a/packages/solid/test/dev.spec.ts b/packages/solid/test/dev.spec.ts
index cc9548ae1..a6c72fc97 100644
--- a/packages/solid/test/dev.spec.ts
+++ b/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", () => {
diff --git a/packages/solid/test/external-source.spec.ts b/packages/solid/test/external-source.spec.ts
index 1a33369c1..10208a424 100644
--- a/packages/solid/test/external-source.spec.ts
+++ b/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";
diff --git a/packages/solid/test/observable.spec.ts b/packages/solid/test/observable.spec.ts
index 88e538557..39f84ecf2 100644
--- a/packages/solid/test/observable.spec.ts
+++ b/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", () => {
diff --git a/packages/solid/test/resource.spec.ts b/packages/solid/test/resource.spec.ts
index ef0b5e447..9874e6b2b 100644
--- a/packages/solid/test/resource.spec.ts
+++ b/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,
diff --git a/packages/solid/test/resource.type-tests.ts b/packages/solid/test/resource.type-tests.ts
index 3d1cd5ec2..eb833c9d7 100644
--- a/packages/solid/test/resource.type-tests.ts
+++ b/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;
// https://github.com/Microsoft/TypeScript/issues/27024#issuecomment-421529650
diff --git a/packages/solid/test/scheduler.spec.ts b/packages/solid/test/scheduler.spec.ts
index 76ef80162..a7252afb6 100644
--- a/packages/solid/test/scheduler.spec.ts
+++ b/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", () => {
diff --git a/packages/solid/test/signals.memo.spec.ts b/packages/solid/test/signals.memo.spec.ts
index 8f72c360d..9cb6e1864 100644
--- a/packages/solid/test/signals.memo.spec.ts
+++ b/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", () => {
diff --git a/packages/solid/test/signals.spec.ts b/packages/solid/test/signals.spec.ts
index 23c4c3f24..8e23534bf 100644
--- a/packages/solid/test/signals.spec.ts
+++ b/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";
diff --git a/packages/solid/test/signals.type-tests.ts b/packages/solid/test/signals.type-tests.ts
index 8aed0a9e1..25272dfbf 100644
--- a/packages/solid/test/signals.type-tests.ts
+++ b/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;
diff --git a/packages/solid/web/test/context.spec.tsx b/packages/solid/web/test/context.spec.tsx
index ca0778be8..a0f28c940 100644
--- a/packages/solid/web/test/context.spec.tsx
+++ b/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");
diff --git a/packages/solid/web/test/dynamic.spec.tsx b/packages/solid/web/test/dynamic.spec.tsx
index cf0d1e336..178d88e25 100644
--- a/packages/solid/web/test/dynamic.spec.tsx
+++ b/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;
diff --git a/packages/solid/web/test/element.spec.tsx b/packages/solid/web/test/element.spec.tsx
index 301e59dda..da36698d1 100644
--- a/packages/solid/web/test/element.spec.tsx
+++ b/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 {
diff --git a/packages/solid/web/test/errorboundary.spec.tsx b/packages/solid/web/test/errorboundary.spec.tsx
index cbb7a9414..20a8cd266 100644
--- a/packages/solid/web/test/errorboundary.spec.tsx
+++ b/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;
diff --git a/packages/solid/web/test/for.spec.tsx b/packages/solid/web/test/for.spec.tsx
index 076066b16..e3bab9310 100644
--- a/packages/solid/web/test/for.spec.tsx
+++ b/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;
diff --git a/packages/solid/web/test/index.spec.tsx b/packages/solid/web/test/index.spec.tsx
index 4da4978be..e757bc170 100644
--- a/packages/solid/web/test/index.spec.tsx
+++ b/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;
diff --git a/packages/solid/web/test/portal.spec.tsx b/packages/solid/web/test/portal.spec.tsx
index 0488de786..413bec263 100644
--- a/packages/solid/web/test/portal.spec.tsx
+++ b/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"),
diff --git a/packages/solid/web/test/server-mock.spec.tsx b/packages/solid/web/test/server-mock.spec.tsx
index 8ae8a219b..aea91bb95 100644
--- a/packages/solid/web/test/server-mock.spec.tsx
+++ b/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();
diff --git a/packages/solid/web/test/show.spec.tsx b/packages/solid/web/test/show.spec.tsx
index bed537b58..c2f032b51 100644
--- a/packages/solid/web/test/show.spec.tsx
+++ b/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;
diff --git a/packages/solid/web/test/suspense.spec.tsx b/packages/solid/web/test/suspense.spec.tsx
index abbf0bd0b..a94cf9d91 100644
--- a/packages/solid/web/test/suspense.spec.tsx
+++ b/packages/solid/web/test/suspense.spec.tsx
@@ -3,10 +3,17 @@
* @vitest-environment jsdom
*/
+import { describe, expect, test, beforeEach, afterEach, vi } from "vitest";
import "../../test/MessageChannel";
-import { lazy, createSignal, createResource, useTransition, enableScheduling } from "../../src";
-import { render, Suspense, SuspenseList } from "../src";
-import { createStore } from "../../store/src";
+import {
+ lazy,
+ createSignal,
+ createResource,
+ useTransition,
+ enableScheduling
+} from "../../src/index.js";
+import { render, Suspense, SuspenseList } from "../src/index.js";
+import { createStore } from "../../store/src/index.js";
enableScheduling();
diff --git a/packages/solid/web/test/switch.spec.tsx b/packages/solid/web/test/switch.spec.tsx
index c3cd359ba..d0f55d377 100644
--- a/packages/solid/web/test/switch.spec.tsx
+++ b/packages/solid/web/test/switch.spec.tsx
@@ -2,10 +2,10 @@
* @jsxImportSource solid-js
* @vitest-environment jsdom
*/
-
-import { render, Switch, Match, For } from "../src";
-import { createRoot, createSignal } from "../../src";
-import { createStore } from "../../store/src";
+import { describe, expect, test } from "vitest";
+import { render, Switch, Match, For } from "../src/index.js";
+import { createRoot, createSignal } from "../../src/index.js";
+import { createStore } from "../../store/src/index.js";
describe("Testing a single match switch control flow", () => {
let div: HTMLDivElement, disposer: () => void;