" }} />`,
90 | errors: [{ messageId: "dangerouslySetInnerHTML" }],
91 | output: `let el =
Hello
world!
"} />`,
92 | },
93 | {
94 | code: `let el =
`,
95 | errors: [{ messageId: "dangerouslySetInnerHTML" }],
96 | },
97 | {
98 | code: `let el =
`,
99 | errors: [{ messageId: "dangerouslySetInnerHTML" }],
100 | },
101 | ],
102 | });
103 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/test/rules/no-proxy-apis.test.ts:
--------------------------------------------------------------------------------
1 | import { AST_NODE_TYPES as T } from "@typescript-eslint/utils";
2 | import { run } from "../ruleTester";
3 | import rule from "../../src/rules/no-proxy-apis";
4 |
5 | export const cases = run("no-proxy-apis", rule, {
6 | valid: [
7 | `let merged = mergeProps({}, props);`,
8 | `const obj = {}; let merged = mergeProps(obj, props);`,
9 | `let obj = {}; let merged = mergeProps(obj, props);`,
10 | `let merged = mergeProps({ get asdf() { signal() } }, props);`,
11 | `let el =
`,
12 | `let el =
`,
13 | `let obj = { Proxy: 1 }`,
14 | ],
15 | invalid: [
16 | {
17 | code: `let proxy = new Proxy(asdf, {});`,
18 | errors: [{ messageId: "proxyLiteral" }],
19 | },
20 | {
21 | code: `let proxy = Proxy.revocable(asdf, {});`,
22 | errors: [{ messageId: "proxyLiteral" }],
23 | },
24 | {
25 | code: `import {} from 'solid-js/store';`,
26 | errors: [{ messageId: "noStore", type: T.ImportDeclaration }],
27 | },
28 | {
29 | code: `let el =
`,
30 | errors: [{ messageId: "spreadCall" }],
31 | },
32 | {
33 | code: `let el =
`,
34 | errors: [{ messageId: "spreadCall" }],
35 | },
36 | {
37 | code: `let el =
`,
38 | errors: [{ messageId: "spreadMember" }],
39 | },
40 | {
41 | code: `let el =
`,
42 | errors: [{ messageId: "spreadMember" }],
43 | },
44 | {
45 | code: `let merged = mergeProps(maybeSignal)`,
46 | errors: [{ messageId: "mergeProps" }],
47 | },
48 | {
49 | code: `let func = () => ({}); let merged = mergeProps(func, props)`,
50 | errors: [{ messageId: "mergeProps" }],
51 | },
52 | ],
53 | });
54 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/test/rules/no-react-deps.test.ts:
--------------------------------------------------------------------------------
1 | import { run } from "../ruleTester";
2 | import rule from "../../src/rules/no-react-deps";
3 |
4 | export const cases = run("no-react-deps", rule, {
5 | valid: [
6 | `createEffect(() => {
7 | console.log(signal());
8 | });`,
9 | `createEffect((prev) => {
10 | console.log(signal());
11 | return prev + 1;
12 | }, 0);`,
13 | `createEffect((prev) => {
14 | console.log(signal());
15 | return (prev || 0) + 1;
16 | });`,
17 | `createEffect((prev) => {
18 | console.log(signal());
19 | return prev ? prev + 1 : 1;
20 | }, undefined);`,
21 | `const value = createMemo(() => computeExpensiveValue(a(), b()));`,
22 | `const sum = createMemo((prev) => input() + prev, 0);`,
23 | `const args = [() => { console.log(signal()); }, [signal()]];
24 | createEffect(...args);`,
25 | ],
26 | invalid: [
27 | {
28 | code: `createEffect(() => {
29 | console.log(signal());
30 | }, [signal()]);`,
31 | errors: [{ messageId: "noUselessDep", data: { name: "createEffect" } }],
32 | output: `createEffect(() => {
33 | console.log(signal());
34 | }, );`,
35 | },
36 | {
37 | code: `createEffect(() => {
38 | console.log(signal());
39 | }, [signal]);`,
40 | errors: [{ messageId: "noUselessDep", data: { name: "createEffect" } }],
41 | output: `createEffect(() => {
42 | console.log(signal());
43 | }, );`,
44 | },
45 | {
46 | code: `const deps = [signal];
47 | createEffect(() => {
48 | console.log(signal());
49 | }, deps);`,
50 | errors: [{ messageId: "noUselessDep", data: { name: "createEffect" } }],
51 | // no `output`
52 | },
53 | {
54 | code: `const value = createMemo(() => computeExpensiveValue(a(), b()), [a(), b()]);`,
55 | errors: [{ messageId: "noUselessDep", data: { name: "createMemo" } }],
56 | output: `const value = createMemo(() => computeExpensiveValue(a(), b()), );`,
57 | },
58 | {
59 | code: `const value = createMemo(() => computeExpensiveValue(a(), b()), [a, b]);`,
60 | errors: [{ messageId: "noUselessDep", data: { name: "createMemo" } }],
61 | output: `const value = createMemo(() => computeExpensiveValue(a(), b()), );`,
62 | },
63 | {
64 | code: `const value = createMemo(() => computeExpensiveValue(a(), b()), [a, b()]);`,
65 | errors: [{ messageId: "noUselessDep", data: { name: "createMemo" } }],
66 | output: `const value = createMemo(() => computeExpensiveValue(a(), b()), );`,
67 | },
68 | {
69 | code: `const deps = [a, b];
70 | const value = createMemo(() => computeExpensiveValue(a(), b()), deps);`,
71 | errors: [{ messageId: "noUselessDep", data: { name: "createMemo" } }],
72 | // no `output`
73 | },
74 | {
75 | code: `const deps = [a, b];
76 | const memoFn = () => computeExpensiveValue(a(), b());
77 | const value = createMemo(memoFn, deps);`,
78 | errors: [{ messageId: "noUselessDep", data: { name: "createMemo" } }],
79 | // no `output`
80 | },
81 | ],
82 | });
83 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/test/rules/no-react-specific-props.test.ts:
--------------------------------------------------------------------------------
1 | import { run } from "../ruleTester";
2 | import rule from "../../src/rules/no-react-specific-props";
3 |
4 | export const cases = run("no-react-specific-props", rule, {
5 | valid: [
6 | `let el =
Hello world!
;`,
7 | `let el =
Hello world!
;`,
8 | `let el =
Hello world!
;`,
9 | `let el =
Hello world!
;`,
10 | `let el =
;`,
11 | `let el =
`,
12 | `let el =
`,
13 | `let el =
`,
14 | `let el =
`,
15 | `let el =
`,
16 | ],
17 | invalid: [
18 | {
19 | code: `let el =
Hello world!
`,
20 | errors: [{ messageId: "prefer", data: { from: "className", to: "class" } }],
21 | output: `let el =
Hello world!
`,
22 | },
23 | {
24 | code: `let el =
Hello world!
`,
25 | errors: [{ messageId: "prefer", data: { from: "className", to: "class" } }],
26 | output: `let el =
Hello world!
`,
27 | },
28 | {
29 | code: `let el =
`,
30 | errors: [{ messageId: "prefer", data: { from: "className", to: "class" } }],
31 | output: `let el =
`,
32 | },
33 | {
34 | code: `let el =
Hello world!
`,
35 | errors: [{ messageId: "prefer", data: { from: "className", to: "class" } }],
36 | output: `let el =
Hello world!
`,
37 | },
38 | {
39 | code: `let el =
Hello world!`,
40 | errors: [{ messageId: "prefer", data: { from: "className", to: "class" } }],
41 | output: `let el =
Hello world!`,
42 | },
43 | {
44 | code: `let el =
`,
45 | errors: [{ messageId: "prefer", data: { from: "htmlFor", to: "for" } }],
46 | output: `let el =
`,
47 | },
48 | {
49 | code: `let el =
`,
50 | errors: [{ messageId: "prefer", data: { from: "htmlFor", to: "for" } }],
51 | output: `let el =
`,
52 | },
53 | {
54 | code: `let el =
`,
55 | errors: [{ messageId: "prefer", data: { from: "htmlFor", to: "for" } }],
56 | output: `let el =
`,
57 | },
58 | {
59 | code: `let el =
Hello world!`,
60 | errors: [{ messageId: "prefer", data: { from: "htmlFor", to: "for" } }],
61 | output: `let el =
Hello world!`,
62 | },
63 | {
64 | code: `let el =
`,
65 | errors: [{ messageId: "noUselessKey" }],
66 | output: `let el =
`,
67 | },
68 | ],
69 | });
70 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/test/rules/no-unknown-namespaces.test.ts:
--------------------------------------------------------------------------------
1 | import { run } from "../ruleTester";
2 | import rule from "../../src/rules/no-unknown-namespaces";
3 |
4 | export const cases = run("no-unknown-namespaces", rule, {
5 | valid: [
6 | `let el =
;`,
7 | `let el =
;`,
8 | `let el =
;`,
9 | `let el =
;`,
10 | `let el =
;`,
11 | `let el =
;`,
12 | `let el =
;`,
13 | `let el =
;`,
14 | `let el =
;`,
15 | `let el =
`,
16 | {
17 | options: [{ allowedNamespaces: ["foo"] }],
18 | code: `let el =
`,
19 | },
20 | ],
21 | invalid: [
22 | {
23 | code: `let el =
`,
24 | errors: [{ messageId: "unknown", data: { namespace: "foo" } }],
25 | },
26 | {
27 | code: `let el =
`,
28 | errors: [{ messageId: "unknown", data: { namespace: "bar" } }],
29 | },
30 | {
31 | code: `let el =
`,
32 | errors: [{ messageId: "style", data: { namespace: "style" } }],
33 | },
34 | {
35 | code: `let el =
`,
36 | errors: [{ messageId: "style", data: { namespace: "style" } }],
37 | },
38 | {
39 | code: `let el =
`,
40 | errors: [{ messageId: "style", data: { namespace: "class" } }],
41 | },
42 | {
43 | code: `let el =
`,
44 | errors: [{ messageId: "style", data: { namespace: "class" } }],
45 | },
46 | {
47 | code: `let el =
`,
48 | errors: [
49 | {
50 | messageId: "component",
51 | suggestions: [
52 | {
53 | messageId: "component-suggest",
54 | data: { namespace: "attr", name: "foo" },
55 | output: `let el =
`,
56 | },
57 | ],
58 | },
59 | ],
60 | },
61 | {
62 | code: `let el =
`,
63 | errors: [
64 | {
65 | messageId: "component",
66 | suggestions: [
67 | {
68 | messageId: "component-suggest",
69 | data: { namespace: "foo", name: "boo" },
70 | output: `let el =
`,
71 | },
72 | ],
73 | },
74 | ],
75 | },
76 | ],
77 | });
78 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/test/rules/prefer-classlist.test.ts:
--------------------------------------------------------------------------------
1 | import { run } from "../ruleTester";
2 | import rule from "../../src/rules/prefer-classlist";
3 |
4 | export const cases = run("prefer-classlist", rule, {
5 | valid: [
6 | `let el =
Hello, world!
`,
7 | `let el =
Hello, world!
`,
8 | `let el =
Hello, world!
`,
9 | `let el =
Hello, world!
`,
10 | `let el =
Hello, world!
`,
11 | `let el =
Hello, world!
`,
12 | `let el =
Hello, world!
`,
13 | `let el =
Hello, world!
`,
14 | `let el =
Hello, world!
`,
15 | `let el =
Hello, world!
`,
16 | {
17 | code: `let el =
Hello, world!
`,
18 | options: [{ classnames: ["x", "y", "z"] }],
19 | },
20 | ],
21 | invalid: [
22 | {
23 | code: `let el =
Hello, world!
`,
24 | errors: [{ messageId: "preferClasslist", data: { classnames: "cn" } }],
25 | output: `let el =
Hello, world!
`,
26 | },
27 | {
28 | code: `let el =
Hello, world!
`,
29 | errors: [{ messageId: "preferClasslist", data: { classnames: "clsx" } }],
30 | output: `let el =
Hello, world!
`,
31 | },
32 | {
33 | code: `let el =
Hello, world!
`,
34 | errors: [{ messageId: "preferClasslist", data: { classnames: "classnames" } }],
35 | output: `let el =
Hello, world!
`,
36 | },
37 | {
38 | code: `let el =
Hello, world!
`,
39 | options: [{ classnames: ["x", "y", "z"] }],
40 | errors: [{ messageId: "preferClasslist", data: { classnames: "x" } }],
41 | output: `let el =
Hello, world!
`,
42 | },
43 | {
44 | code: `let el =
Hello, world!
`,
45 | errors: [{ messageId: "preferClasslist", data: { classnames: "cn" } }],
46 | output: `let el =
Hello, world!
`,
47 | },
48 | {
49 | code: `let el =
2 })}>Hello, world!
`,
50 | errors: [{ messageId: "preferClasslist", data: { classnames: "cn" } }],
51 | output: `let el =
2 }}>Hello, world!
`,
52 | },
53 | ],
54 | });
55 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/test/rules/prefer-for.test.ts:
--------------------------------------------------------------------------------
1 | import { run, tsOnly } from "../ruleTester";
2 | import rule from "../../src/rules/prefer-for";
3 |
4 | export const cases = run("prefer-for", rule, {
5 | valid: [
6 | `let Component = (props) =>
{d => - {d.text}
}
;`,
7 | `let abc = x.map(y => y + z);`,
8 | `let Component = (props) => {
9 | let abc = x.map(y => y + z);
10 | return
Hello, world!
;
11 | }`,
12 | ],
13 | invalid: [
14 | // fixes to add
, which can be auto-imported in jsx-no-undef
15 | {
16 | code: `let Component = (props) =>
{props.data.map(d => - {d.text}
)}
;`,
17 | errors: [{ messageId: "preferFor" }],
18 | output: `let Component = (props) =>
{d => - {d.text}
}
;`,
19 | },
20 | {
21 | code: `let Component = (props) => <>{props.data.map(d =>
{d.text})};`,
22 | errors: [{ messageId: "preferFor" }],
23 | output: `let Component = (props) => <>
{d => {d.text}};`,
24 | },
25 | {
26 | code: `let Component = (props) =>
{props.data.map(d => - {d.text}
)}
;`,
27 | errors: [{ messageId: "preferFor" }],
28 | output: `let Component = (props) =>
{d => - {d.text}
}
;`,
29 | },
30 | {
31 | code: `
32 | function Component(props) {
33 | return
{props.data.map(d => - {d.text}
)}
;
34 | }`,
35 | errors: [{ messageId: "preferFor" }],
36 | output: `
37 | function Component(props) {
38 | return
{d => - {d.text}
}
;
39 | }`,
40 | },
41 | {
42 | code: `
43 | function Component(props) {
44 | return
{props.data?.map(d => - {d.text}
)}
;
45 | }`,
46 | errors: [{ messageId: "preferFor" }],
47 | output: `
48 | function Component(props) {
49 | return
{{d => - {d.text}
}}
;
50 | }`,
51 | [tsOnly]: true,
52 | },
53 | // deopts
54 | {
55 | code: `let Component = (props) =>
{props.data.map(() => )}
;`,
56 | errors: [{ messageId: "preferForOrIndex" }],
57 | },
58 | {
59 | code: `let Component = (props) =>
{props.data.map((...args) => - {args[0].text}
)}
;`,
60 | errors: [{ messageId: "preferForOrIndex" }],
61 | },
62 | ],
63 | });
64 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/test/rules/prefer-show.test.ts:
--------------------------------------------------------------------------------
1 | import { run } from "../ruleTester";
2 | import rule from "../../src/rules/prefer-show";
3 |
4 | export const cases = run("prefer-show", rule, {
5 | valid: [
6 | `function Component(props) {
7 | return
Content;
8 | }`,
9 | `function Component(props) {
10 | return
Content;
11 | }`,
12 | ],
13 | invalid: [
14 | {
15 | code: `
16 | function Component(props) {
17 | return
{props.cond && Content}
;
18 | }`,
19 | errors: [{ messageId: "preferShowAnd" }],
20 | output: `
21 | function Component(props) {
22 | return
Content
;
23 | }`,
24 | },
25 | {
26 | code: `
27 | function Component(props) {
28 | return <>{props.cond &&
Content};
29 | }`,
30 | errors: [{ messageId: "preferShowAnd" }],
31 | output: `
32 | function Component(props) {
33 | return <>
Content;
34 | }`,
35 | },
36 | {
37 | code: `
38 | function Component(props) {
39 | return (
40 |
41 | {props.cond ? (
42 | Content
43 | ) : (
44 | Fallback
45 | )}
46 |
47 | );
48 | }`,
49 | errors: [{ messageId: "preferShowTernary" }],
50 | output: `
51 | function Component(props) {
52 | return (
53 |
54 | Fallback}>Content
55 |
56 | );
57 | }`,
58 | },
59 | // Check that it also works with control flow function children
60 | {
61 | code: `
62 | function Component(props) {
63 | return (
64 |
65 | {(listItem) => listItem.cond && Content}
66 |
67 | );
68 | }`,
69 | errors: [{ messageId: "preferShowAnd" }],
70 | output: `
71 | function Component(props) {
72 | return (
73 |
74 | {(listItem) => Content}
75 |
76 | );
77 | }`,
78 | },
79 | {
80 | code: `
81 | function Component(props) {
82 | return (
83 |
84 | {(listItem) => (listItem.cond ? (
85 | Content
86 | ) : (
87 | Fallback
88 | ))}
89 |
90 | );
91 | }`,
92 | errors: [{ messageId: "preferShowTernary" }],
93 | output: `
94 | function Component(props) {
95 | return (
96 |
97 | {(listItem) => (Fallback}>Content)}
98 |
99 | );
100 | }`,
101 | },
102 | ],
103 | });
104 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/test/rules/self-closing-comp.test.ts:
--------------------------------------------------------------------------------
1 | import { run } from "../ruleTester";
2 | import rule from "../../src/rules/self-closing-comp";
3 |
4 | export const cases = run("self-closing-comp", rule, {
5 | valid: [
6 | `let el =
;`,
7 | `let el =
;`,
8 | `let el =
;`,
9 | `let el =
;`,
10 | `let el =
11 |
12 | ;`,
13 | `let el =
14 |
15 | `,
16 | `let el =
;`,
17 | `let el =
;`,
18 |
19 | `let el =
;`,
20 | `let el =
`,
21 | `let el =
{' '}
`,
22 | {
23 | code: `let el =
;`,
24 | options: [{ html: "none" }],
25 | },
26 | {
27 | code: `let el =
![]()
;`,
28 | options: [{ html: "none" }],
29 | },
30 | {
31 | code: `let el =
;`,
32 | options: [{ html: "void" }],
33 | },
34 | {
35 | code: `let el = (
36 |
37 |
38 | )`,
39 | options: [{ html: "none" }],
40 | },
41 | {
42 | code: `let el =
`,
43 | options: [{ component: "none" }],
44 | },
45 | ],
46 | invalid: [
47 | {
48 | code: `let el =
;`,
49 | errors: [{ messageId: "selfClose" }],
50 | output: `let el =
;`,
51 | },
52 | {
53 | code: `let el =
![]()
;`,
54 | errors: [{ messageId: "selfClose" }],
55 | output: `let el =
![]()
;`,
56 | },
57 | {
58 | code: `let el =
;`,
59 | options: [{ html: "void" }],
60 | errors: [{ messageId: "dontSelfClose" }],
61 | output: `let el =
;`,
62 | },
63 | {
64 | code: `let el =
;`,
65 | options: [{ html: "void" }],
66 | errors: [{ messageId: "dontSelfClose" }],
67 | output: `let el =
;`,
68 | },
69 | {
70 | code: `let el =
![]()
;`,
71 | options: [{ html: "none" }],
72 | errors: [{ messageId: "dontSelfClose" }],
73 | output: `let el =
![]()
;`,
74 | },
75 | {
76 | code: `let el =
![]()
;`,
77 | options: [{ html: "none" }],
78 | errors: [{ messageId: "dontSelfClose" }],
79 | output: `let el =
![]()
;`,
80 | },
81 | {
82 | code: `let el = (
83 |
84 |
85 | );`,
86 | errors: [{ messageId: "selfClose" }],
87 | output: `let el = (
88 |
89 | );`,
90 | },
91 | {
92 | code: `let el = (
93 |
94 |
95 | );`,
96 | errors: [{ messageId: "selfClose" }],
97 | output: `let el = (
98 |
99 | );`,
100 | },
101 | {
102 | code: `let el =
;`,
103 | options: [{ component: "none" }],
104 | errors: [{ messageId: "dontSelfClose" }],
105 | output: `let el =
;`,
106 | },
107 | ],
108 | });
109 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | export default defineConfig({
4 | entry: ["src/index.ts", "src/configs/recommended.ts", "src/configs/typescript.ts"],
5 | format: ["cjs", "esm"],
6 | dts: true,
7 | // experimentalDts: true,
8 | sourcemap: true,
9 | clean: true,
10 | });
11 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/vitest.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | test: {
3 | globals: true,
4 | setupFiles: ["vitest.setup.js"],
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/packages/eslint-plugin-solid/vitest.setup.js:
--------------------------------------------------------------------------------
1 | import { vi } from "vitest";
2 |
3 | // Don't bother checking for imports for every test
4 | vi.mock("./src/utils", async (importOriginal) => {
5 | return {
6 | ...(await importOriginal()),
7 | trackImports: () => {
8 | const handleImportDeclaration = () => {};
9 | const matchImport = (imports, str) => {
10 | const importArr = Array.isArray(imports) ? imports : [imports];
11 | return importArr.find((i) => i === str);
12 | };
13 | return { matchImport, handleImportDeclaration };
14 | },
15 | };
16 | });
17 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/README.md:
--------------------------------------------------------------------------------
1 | # eslint-solid-standalone
2 |
3 | This package bundles ESLint, eslint-plugin-solid, and necessary tooling
4 | together into one package that can be used on the web or in a web worker.
5 |
6 | It mainly exists to power ESLint support in the Solid playground.
7 |
8 | Heavily inspired/lifted from [@typescript-eslint](https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/website-eslint)'s equivalent setup.
9 |
10 | ## API
11 |
12 | ```ts
13 | export function verify(
14 | code: string,
15 | ruleSeverityOverrides?: Record
16 | ): Linter.LintMessage[];
17 |
18 | export function verifyAndFix(
19 | code: string,
20 | ruleSeverityOverrides?: Record
21 | ): Linter.FixReport;
22 |
23 | export { plugin }; // eslint-plugin-solid
24 | export { pluginVersion, eslintVersion };
25 | ```
26 |
27 | `code`: a string of source code, supports TS and JSX
28 |
29 | `ruleSeverityOverrides`: an optional record of rule id (i.e. "solid/reactivity") to severity (i.e. 0, 1, or 2)
30 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/dist.d.ts:
--------------------------------------------------------------------------------
1 | import type { ESLint, Linter } from "eslint";
2 | export type { ESLint, Linter };
3 |
4 | export declare const plugin: ESLint.Plugin;
5 | export declare const pluginVersion: string;
6 | export declare const eslintVersion: string;
7 |
8 | export declare function verify(
9 | code: string,
10 | ruleSeverityOverrides?: Record
11 | ): ReturnType;
12 | export declare function verifyAndFix(
13 | code: string,
14 | ruleSeverityOverrides?: Record
15 | ): ReturnType;
16 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/index.js:
--------------------------------------------------------------------------------
1 | import { Linter } from "eslint/linter";
2 | import * as parser from "@typescript-eslint/parser";
3 | import plugin from "eslint-plugin-solid";
4 | import { version as pluginVersion } from "eslint-plugin-solid/package.json";
5 | import memoizeOne from "memoize-one";
6 |
7 | // Create linter instance
8 | const linter = new Linter({ configType: "flat" });
9 |
10 | const getConfig = memoizeOne((ruleSeverityOverrides) => {
11 | const config = [
12 | {
13 | languageOptions: {
14 | parser,
15 | parserOptions: {
16 | ecmaFeatures: {
17 | jsx: true,
18 | },
19 | },
20 | },
21 | ...plugin.configs["flat/typescript"],
22 | },
23 | ];
24 | if (ruleSeverityOverrides) {
25 | // change severity levels of rules based on rules: Record arg
26 | Object.keys(ruleSeverityOverrides).forEach((key) => {
27 | if (Object.prototype.hasOwnProperty.call(config[0].rules, key)) {
28 | if (Array.isArray(config[0].rules[key])) {
29 | config[0].rules[key] = [ruleSeverityOverrides[key], ...config[0].rules[key].slice(1)];
30 | } else {
31 | config[0].rules[key] = ruleSeverityOverrides[key];
32 | }
33 | }
34 | });
35 | }
36 | return config;
37 | });
38 |
39 | linter.verify = memoizeOne(linter.verify);
40 | linter.verifyAndFix = memoizeOne(linter.verifyAndFix);
41 |
42 | export { plugin, pluginVersion };
43 | export const eslintVersion = linter.version;
44 |
45 | export function verify(code, ruleSeverityOverrides) {
46 | const config = getConfig(ruleSeverityOverrides);
47 | return linter.verify(code, config);
48 | }
49 |
50 | export function verifyAndFix(code, ruleSeverityOverrides) {
51 | const config = getConfig(ruleSeverityOverrides);
52 | return linter.verifyAndFix(code, config);
53 | }
54 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/mock/empty.js:
--------------------------------------------------------------------------------
1 | export default {};
2 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/mock/glob-parent.js:
--------------------------------------------------------------------------------
1 | module.exports = () => "";
2 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/mock/globby.js:
--------------------------------------------------------------------------------
1 | export function sync() {
2 | // the website config is static and doesn't use glob config
3 | return [];
4 | }
5 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/mock/is-glob.js:
--------------------------------------------------------------------------------
1 | export default function isGlob() {
2 | // the website config is static and doesn't use glob config
3 | return false;
4 | }
5 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/mock/semver.js:
--------------------------------------------------------------------------------
1 | import satisfies from "semver/functions/satisfies";
2 | import major from "semver/functions/major";
3 |
4 | // just in case someone adds a import * as semver usage
5 | export { satisfies, major };
6 |
7 | export default { satisfies, major };
8 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/mock/util.js:
--------------------------------------------------------------------------------
1 | const util = {};
2 |
3 | util.inspect = function (value) {
4 | return value;
5 | };
6 |
7 | export default util;
8 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "eslint-solid-standalone",
3 | "version": "0.14.5",
4 | "description": "A bundle with eslint and eslint-plugin-solid that can be used in the browser.",
5 | "repository": "https://github.com/solidjs-community/eslint-plugin-solid",
6 | "license": "MIT",
7 | "author": "Josh Wilson ",
8 | "type": "module",
9 | "main": "dist.js",
10 | "types": "dist.d.ts",
11 | "files": [
12 | "dist.js",
13 | "dist.d.ts",
14 | "dist.js.map",
15 | "README.md"
16 | ],
17 | "scripts": {
18 | "build": "rollup --config=rollup.config.mjs",
19 | "test": "node --experimental-vm-modules ./test.mjs",
20 | "turbo:build": "rollup --config=rollup.config.mjs",
21 | "turbo:test": "node --experimental-vm-modules ./test.mjs"
22 | },
23 | "dependencies": {
24 | "@types/eslint": "^8.56.7"
25 | },
26 | "devDependencies": {
27 | "@rollup/plugin-commonjs": "^25.0.7",
28 | "@rollup/plugin-json": "^6.1.0",
29 | "@rollup/plugin-node-resolve": "^15.2.3",
30 | "@rollup/pluginutils": "^5.1.0",
31 | "@typescript-eslint/parser": "^6.21.0",
32 | "@typescript-eslint/utils": "^6.21.0",
33 | "eslint": "8.57.0",
34 | "eslint-plugin-solid": "workspace:^",
35 | "magic-string": "^0.30.8",
36 | "memoize-one": "^6.0.0",
37 | "rollup": "^3.29.5",
38 | "semver": "^7.6.0",
39 | "typescript": "~5.3.3"
40 | },
41 | "peerDependencies": {
42 | "typescript": ">=4.0.0"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/rollup-plugin-replace.mjs:
--------------------------------------------------------------------------------
1 | // lifted from @typescript-eslint/website-eslint/rollup-plugin/replace.js
2 | import path from "path";
3 | import Module from "module";
4 | import { createFilter } from "@rollup/pluginutils";
5 | import MagicString from "magic-string";
6 | import { createRequire } from "node:module";
7 |
8 | const require = createRequire(import.meta.url);
9 |
10 | function toAbsolute(id) {
11 | return id.startsWith("./") ? path.resolve(id) : require.resolve(id);
12 | }
13 |
14 | function log(opts, message, type = "info") {
15 | if (opts.verbose) {
16 | console.log("rollup-plugin-replace > [" + type + "]", message);
17 | }
18 | }
19 |
20 | function createMatcher(it) {
21 | if (typeof it === "function") {
22 | return it;
23 | } else {
24 | return createFilter(it);
25 | }
26 | }
27 |
28 | export default (options = {}) => {
29 | const aliasesCache = new Map();
30 | const aliases = (options.alias || []).map((item) => {
31 | return {
32 | match: item.match,
33 | matcher: createMatcher(item.match),
34 | target: item.target,
35 | absoluteTarget: toAbsolute(item.target),
36 | };
37 | });
38 | const replaces = (options.replace || []).map((item) => {
39 | return {
40 | match: item.match,
41 | test: item.test,
42 | replace: typeof item.replace === "string" ? () => item.replace : item.replace,
43 |
44 | matcher: createMatcher(item.match),
45 | };
46 | });
47 |
48 | return {
49 | name: "rollup-plugin-replace",
50 | resolveId(id, importerPath) {
51 | const importeePath =
52 | id.startsWith("./") || id.startsWith("../")
53 | ? Module.createRequire(importerPath).resolve(id)
54 | : id;
55 |
56 | let result = aliasesCache.get(importeePath);
57 | if (result) {
58 | return result;
59 | }
60 |
61 | result = aliases.find((item) => item.matcher(importeePath));
62 | if (result) {
63 | aliasesCache.set(importeePath, result.absoluteTarget);
64 | log(options, `${importeePath} as ${result.target}`, "resolve");
65 | return result.absoluteTarget;
66 | }
67 |
68 | return null;
69 | },
70 | transform(code, id) {
71 | let hasReplacements = false;
72 | let magicString = new MagicString(code);
73 |
74 | replaces.forEach((item) => {
75 | if (item.matcher && !item.matcher(id)) {
76 | return;
77 | }
78 |
79 | let match = item.test.exec(code);
80 | let start, end;
81 | while (match) {
82 | hasReplacements = true;
83 | start = match.index;
84 | end = start + match[0].length;
85 | magicString.overwrite(start, end, item.replace(match));
86 | match = item.test.global ? item.test.exec(code) : null;
87 | }
88 | });
89 |
90 | if (!hasReplacements) {
91 | return;
92 | }
93 | log(options, id, "replace");
94 |
95 | const map = magicString.generateMap();
96 | return { code: magicString.toString(), map: map.toString() };
97 | },
98 | };
99 | };
100 |
--------------------------------------------------------------------------------
/packages/eslint-solid-standalone/test.mjs:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | import path from "node:path";
3 | import fs from "node:fs";
4 | import assert from "node:assert";
5 | import vm from "node:vm";
6 | import typescript from "typescript";
7 |
8 | /**
9 | * Test that dist.js can be run in a clean environment without Node or browser APIs, that it won't
10 | * crash, and that it will produce expected results. Code in, lints/fixes out is all it needs to do.
11 | */
12 |
13 | // inject assert and a hidden _TYPESCRIPT_GLOBAL into global scope
14 | const context = vm.createContext({
15 | assert,
16 | structuredClone,
17 | _TYPESCRIPT_GLOBAL: typescript,
18 | });
19 |
20 | // create a module with the standalone build
21 | const code = fs.readFileSync(path.resolve("dist.js"), "utf-8");
22 | const dist = new vm.SourceTextModule(code, { identifier: "dist.js", context });
23 |
24 | // create a module reexporting typescript, a peer dependency of the standalone build
25 | const ts = new vm.SourceTextModule("export default _TYPESCRIPT_GLOBAL", {
26 | identifier: "typescript",
27 | context,
28 | });
29 |
30 | // create a module that tests the build with `assert`
31 | const test = new vm.SourceTextModule(
32 | `
33 | import { plugin, pluginVersion, eslintVersion, verify, verifyAndFix } from "dist.js";
34 |
35 | // check no Node APIs are present, except injected 'assert' and '_TYPESCRIPT_GLOBAL'
36 | assert.equal(Object.keys(globalThis).length, 3);
37 | assert.equal(typeof assert, 'function');
38 | assert.equal(typeof process, 'undefined');
39 | assert.equal(typeof __dirname, 'undefined');
40 |
41 | // check for presence of exported variables
42 | assert.equal(typeof plugin, "object");
43 | assert.equal(typeof pluginVersion, "string");
44 | assert.equal(typeof eslintVersion, "string");
45 | assert.equal(eslintVersion[0], '8')
46 | assert.equal(typeof verify, "function");
47 | assert.equal(typeof verifyAndFix, "function");
48 |
49 | // ensure that the standalone runs without crashing and returns results
50 | assert.deepStrictEqual(
51 | verify('let el = ', { 'solid/no-react-specific-props': 2 }),
52 | [{
53 | ruleId: "solid/no-react-specific-props",
54 | severity: 2,
55 | message: "Prefer the \`class\` prop over the deprecated \`className\` prop.",
56 | line: 1,
57 | column: 15,
58 | nodeType: "JSXAttribute",
59 | messageId: "prefer",
60 | endLine: 1,
61 | endColumn: 30,
62 | fix: { range: [14, 23], text: "class" },
63 | }],
64 | );
65 | assert.deepStrictEqual(verifyAndFix('let el = '), {
66 | fixed: true,
67 | messages: [],
68 | output: 'let el = ',
69 | });
70 | `,
71 | { identifier: "test.mjs", context }
72 | );
73 |
74 | // resolve imports to created modules, disallow any other attempts to import
75 | const linker = (specifier) => {
76 | const mod = {
77 | typescript: ts,
78 | "dist.js": dist,
79 | }[specifier];
80 | if (!mod) {
81 | throw new Error(`can't import other modules: ${specifier}`);
82 | }
83 | return mod;
84 | };
85 | await Promise.all([dist.link(linker), test.link(linker), ts.link(linker)]);
86 |
87 | // run the test module
88 | await test.evaluate({ timeout: 10 * 1000 });
89 | assert.equal(test.status, "evaluated");
90 |
--------------------------------------------------------------------------------
/patches/eslint@8.57.0.patch:
--------------------------------------------------------------------------------
1 | diff --git a/package.json b/package.json
2 | index a51b58b2444f41ead8b445f27003245b451f5728..48820932d33a3671c07e0f909017a2894d3ace06 100644
3 | --- a/package.json
4 | +++ b/package.json
5 | @@ -10,7 +10,8 @@
6 | "exports": {
7 | "./package.json": "./package.json",
8 | ".": "./lib/api.js",
9 | - "./use-at-your-own-risk": "./lib/unsupported-api.js"
10 | + "./use-at-your-own-risk": "./lib/unsupported-api.js",
11 | + "./linter": "./lib/linter/index.js"
12 | },
13 | "scripts": {
14 | "build:docs:update-links": "node tools/fetch-docs-links.js",
15 | @@ -175,5 +176,6 @@
16 | "license": "MIT",
17 | "engines": {
18 | "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
19 | - }
20 | + },
21 | + "sideEffects": false
22 | }
23 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "packages/*"
3 | - "test"
4 |
--------------------------------------------------------------------------------
/scripts/version.js:
--------------------------------------------------------------------------------
1 | import fs from "node:fs/promises";
2 | import path from "node:path";
3 | import inc from "semver/functions/inc.js";
4 | import { exec } from "node:child_process";
5 |
6 | const pluginPackageJsonPath = path.resolve("packages", "eslint-plugin-solid", "package.json");
7 | const standalonePackageJsonPath = path.resolve(
8 | "packages",
9 | "eslint-solid-standalone",
10 | "package.json"
11 | );
12 |
13 | const pluginPackageJson = JSON.parse(await fs.readFile(pluginPackageJsonPath, "utf-8"));
14 | const standalonePackageJson = JSON.parse(await fs.readFile(standalonePackageJsonPath, "utf-8"));
15 |
16 | const version = pluginPackageJson.version;
17 | const increment = process.argv[2];
18 | const newVersion = inc(version, increment);
19 |
20 | if (newVersion == null || !/^\d+\.\d+\.\d+$/.test(newVersion)) {
21 | console.error("Usage: node scripts/version.js [increment]");
22 | process.exit(1);
23 | }
24 |
25 | pluginPackageJson.version = newVersion;
26 | standalonePackageJson.version = newVersion;
27 |
28 | await Promise.all([
29 | fs.writeFile(pluginPackageJsonPath, JSON.stringify(pluginPackageJson, null, 2) + "\n", "utf-8"),
30 | fs.writeFile(
31 | standalonePackageJsonPath,
32 | JSON.stringify(standalonePackageJson, null, 2) + "\n",
33 | "utf-8"
34 | ),
35 | ]);
36 | await new Promise((resolve, reject) => {
37 | // Don't create a tag. It's better to wait until this PR is merged, and a tag can be created from
38 | // the GitHub UI (the whole point of versioning + publishing from GitHub).
39 | exec(`git commit --all --message="v${newVersion}"`, (error, stdout, stderr) => {
40 | if (error) {
41 | reject(error);
42 | } else {
43 | console.log(stdout);
44 | console.log(stderr);
45 | resolve(stdout);
46 | }
47 | });
48 | });
49 |
--------------------------------------------------------------------------------
/test/README.md:
--------------------------------------------------------------------------------
1 | Not a real package—just here to test `eslint-plugin-solid` as a built package, i.e. types, export
2 | conditions, etc.
3 |
--------------------------------------------------------------------------------
/test/eslint.config.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | import tseslint from "typescript-eslint";
4 | import globals from "globals";
5 | import recommendedConfig from "eslint-plugin-solid/configs/recommended";
6 |
7 | export default tseslint.config({
8 | files: ["{valid,invalid}/**/*.{js,jsx,ts,tsx}"],
9 | ...recommendedConfig,
10 | languageOptions: {
11 | globals: globals.browser,
12 | parser: tseslint.parser,
13 | parserOptions: {
14 | project: null,
15 | },
16 | },
17 | });
18 |
--------------------------------------------------------------------------------
/test/eslint.config.prefixed.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | import tseslint from "typescript-eslint";
4 | import globals from "globals";
5 | import solid from "eslint-plugin-solid";
6 |
7 | export default tseslint.config({
8 | files: ["{valid,invalid}/**/*.{js,jsx,ts,tsx}"],
9 | ...solid.configs["flat/recommended"],
10 | languageOptions: {
11 | globals: globals.browser,
12 | parser: tseslint.parser,
13 | parserOptions: {
14 | project: null,
15 | },
16 | },
17 | });
18 |
--------------------------------------------------------------------------------
/test/fixture.test.ts:
--------------------------------------------------------------------------------
1 | import { test, expect } from "vitest";
2 |
3 | import path from "path";
4 | import { ESLint as FlatESLint } from "eslint";
5 | import { ESLint as LegacyESLint } from "eslint-v8";
6 |
7 | const cwd = __dirname;
8 | const validDir = path.join(cwd, "valid");
9 | const jsxUndefPath = path.join(cwd, "invalid", "jsx-undef.jsx");
10 |
11 | const checkResult = (result: LegacyESLint.LintResult | FlatESLint.LintResult) => {
12 | if (result.filePath.startsWith(validDir)) {
13 | expect(result.messages).toEqual([]);
14 | expect(result.errorCount).toBe(0);
15 | expect(result.warningCount).toBe(0);
16 | expect(result.usedDeprecatedRules).toEqual([]);
17 | } else {
18 | expect(result.messages).not.toEqual([]);
19 | expect(result.warningCount + result.errorCount).toBeGreaterThan(0);
20 | expect(result.usedDeprecatedRules).toEqual([]);
21 |
22 | if (result.filePath === jsxUndefPath) {
23 | // test for one specific error message
24 | expect(result.messages.some((message) => /'Component' is not defined/.test(message.message)));
25 | }
26 | }
27 | };
28 |
29 | test.concurrent("fixture (legacy)", async () => {
30 | const eslint = new LegacyESLint({
31 | cwd,
32 | baseConfig: {
33 | root: true,
34 | parser: "@typescript-eslint/parser",
35 | env: { browser: true },
36 | plugins: ["solid"],
37 | extends: "plugin:solid/recommended",
38 | },
39 | useEslintrc: false,
40 | });
41 | const results = await eslint.lintFiles("{valid,invalid}/**/*.{js,jsx,ts,tsx}");
42 |
43 | results.forEach(checkResult);
44 |
45 | expect(results.filter((result) => result.filePath === jsxUndefPath).length).toBe(1);
46 | });
47 |
48 | test.concurrent('fixture (.configs["flat/recommended"])', async () => {
49 | const eslint = new FlatESLint({
50 | cwd,
51 | overrideConfigFile: "./eslint.config.prefixed.js",
52 | } as any);
53 | const results = await eslint.lintFiles("{valid,invalid}/**/*.{js,jsx,ts,tsx}");
54 |
55 | results.forEach(checkResult);
56 |
57 | expect(results.filter((result) => result.filePath === jsxUndefPath).length).toBe(1);
58 | });
59 |
60 | test.concurrent("fixture (/configs/recommended)", async () => {
61 | const eslint = new FlatESLint({
62 | cwd,
63 | overrideConfigFile: "./eslint.config.js",
64 | // ignorePatterns: ["eslint.*"],
65 | } as any);
66 |
67 | const results = await eslint.lintFiles("{valid,invalid}/**/*.{js,jsx,ts,tsx}");
68 |
69 | results.forEach(checkResult);
70 |
71 | expect(results.filter((result) => result.filePath === jsxUndefPath).length).toBe(1);
72 | });
73 |
--------------------------------------------------------------------------------
/test/format.test.ts:
--------------------------------------------------------------------------------
1 | import { test, expect, expectTypeOf } from "vitest";
2 |
3 | import recommendedConfig from "eslint-plugin-solid/configs/recommended";
4 | import typescriptConfig from "eslint-plugin-solid/configs/typescript";
5 | import plugin from "eslint-plugin-solid";
6 | import type * as standalone from "eslint-solid-standalone";
7 |
8 | test("flat config has meta", () => {
9 | expect(recommendedConfig.plugins.solid.meta.name).toBe("eslint-plugin-solid");
10 | expect(recommendedConfig.plugins.solid.meta.version).toEqual(expect.any(String));
11 | expect(typescriptConfig.plugins.solid.meta.name).toBe("eslint-plugin-solid");
12 | expect(typescriptConfig.plugins.solid.meta.version).toEqual(expect.any(String));
13 | });
14 |
15 | test('flat configs are also exposed on plugin.configs["flat/*"]', () => {
16 | // include flat configs on legacy config object with `flat/` prefix.
17 | expect(plugin.configs["flat/recommended"]).toBe(recommendedConfig);
18 | expect(plugin.configs["flat/typescript"]).toBe(typescriptConfig);
19 | });
20 |
21 | test("legacy configs use strings, not modules", () => {
22 | expect(plugin.configs.recommended.plugins).toStrictEqual(["solid"]);
23 | expect(plugin.configs.typescript.plugins).toStrictEqual(["solid"]);
24 | });
25 |
26 | test("plugin exposes sane export types", () => {
27 | expectTypeOf().toBeObject();
28 | expectTypeOf().toBeObject();
29 | expectTypeOf().toBeObject();
30 | });
31 |
32 | test("standalone exposes sane export types", () => {
33 | expectTypeOf().toBeFunction();
34 | expectTypeOf().toBeString();
35 | });
36 |
--------------------------------------------------------------------------------
/test/invalid/jsx-undef.jsx:
--------------------------------------------------------------------------------
1 | let el = ;
2 |
--------------------------------------------------------------------------------
/test/invalid/reactivity-renaming.jsx:
--------------------------------------------------------------------------------
1 | import { createSignal as fooBar } from "solid-js";
2 |
3 | const [signal] = fooBar(5);
4 | console.log(signal());
5 |
--------------------------------------------------------------------------------
/test/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "test",
3 | "private": true,
4 | "type": "module",
5 | "scripts": {
6 | "test": "vitest --run",
7 | "turbo:test": "vitest --run"
8 | },
9 | "devDependencies": {
10 | "@types/eslint-v8": "npm:@types/eslint@8",
11 | "eslint": "^9.5.0",
12 | "eslint-plugin-solid": "workspace:^",
13 | "eslint-solid-standalone": "workspace:^",
14 | "eslint-v8": "npm:eslint@8",
15 | "vitest": "^1.5.2"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/test/valid/async/lazy-components/greeting.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | export default function Greeting(props) {
3 | return Hi, {props.name}
;
4 | }
5 |
--------------------------------------------------------------------------------
/test/valid/async/lazy-components/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { lazy } from "solid-js";
4 |
5 | const Greeting = lazy(() => import("./greeting"));
6 |
7 | function App() {
8 | return (
9 | <>
10 | Welcome
11 |
12 |
13 | );
14 | }
15 |
16 | render(() => , document.getElementById("app"));
17 |
--------------------------------------------------------------------------------
/test/valid/async/resources/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { createSignal, createResource } from "solid-js";
3 | import { render } from "solid-js/web";
4 |
5 | const fetchUser = async (id) => (await fetch(`https://swapi.dev/api/people/${id}/`)).json();
6 |
7 | const App = () => {
8 | const [userId, setUserId] = createSignal();
9 | const [user] = createResource(userId, fetchUser);
10 |
11 | return (
12 | <>
13 | setUserId(e.currentTarget.value)}
18 | />
19 | {user.loading && "Loading..."}
20 |
21 |
{JSON.stringify(user(), null, 2)}
22 |
{props.user?.name}
;
5 |
6 | const ProfileTimeline = (props) => (
7 |
8 | {(post) => - {post.text}
}
9 |
10 | );
11 |
12 | const ProfileTrivia = (props) => (
13 | <>
14 | Fun Facts
15 |
16 | {(fact) => - {fact.text}
}
17 |
18 |
19 | );
20 |
21 | const ProfilePage = (props) => (
22 |
23 |
24 | Loading posts...}>
25 |
26 |
27 | Loading fun facts...}>
28 |
29 |
30 |
31 | );
32 |
33 | export default ProfilePage;
34 |
--------------------------------------------------------------------------------
/test/valid/async/suspense/greeting.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/solidjs-community/eslint-plugin-solid/8a17adecb2451bb1cacf8add07d68f2a49bb3614/test/valid/async/suspense/greeting.tsx
--------------------------------------------------------------------------------
/test/valid/async/suspense/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { lazy, Suspense } from "solid-js";
4 |
5 | const Greeting = lazy(async () => {
6 | // simulate delay
7 | await new Promise((r) => setTimeout(r, 1000));
8 | return import("./greeting");
9 | });
10 |
11 | function App() {
12 | return (
13 | <>
14 | Welcome
15 | Loading...}>
16 |
17 |
18 |
19 | );
20 | }
21 |
22 | render(() => , document.getElementById("app"));
23 |
--------------------------------------------------------------------------------
/test/valid/async/transitions/child.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { createResource } from "solid-js";
3 |
4 | const CONTENT = {
5 | Uno: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`,
6 | Dos: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?`,
7 | Tres: `On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.`,
8 | };
9 |
10 | function createDelay() {
11 | return new Promise((resolve) => {
12 | const delay = Math.random() * 420 + 160;
13 | setTimeout(() => resolve(delay), delay);
14 | });
15 | }
16 |
17 | const Child = (props) => {
18 | const [time] = createResource(createDelay);
19 |
20 | return (
21 |
22 | This content is for page "{props.page}" after {time()?.toFixed()}ms.
23 |
{CONTENT[props.page]}
24 |
14 | -
15 | Uno
16 |
17 | -
18 | Dos
19 |
20 | -
21 | Tres
22 |
23 |
24 |
25 | Loading...
}>
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | );
41 | };
42 |
43 | render(App, document.getElementById("app"));
44 |
--------------------------------------------------------------------------------
/test/valid/bindings/classlist/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { createSignal } from "solid-js";
4 |
5 | import "./style.css";
6 |
7 | function App() {
8 | const [current, setCurrent] = createSignal("foo");
9 |
10 | return (
11 | <>
12 |
, document.getElementById("app"));
26 |
--------------------------------------------------------------------------------
/test/valid/bindings/directives/click-outside.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { onCleanup } from "solid-js";
3 |
4 | export default function clickOutside(el, accessor) {
5 | const onClick = (e) => !el.contains(e.target) && accessor()?.();
6 | document.body.addEventListener("click", onClick);
7 |
8 | onCleanup(() => document.body.removeEventListener("click", onClick));
9 | }
10 |
--------------------------------------------------------------------------------
/test/valid/bindings/directives/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { createSignal, Show } from "solid-js";
4 | import clickOutside from "./click-outside";
5 | import "./style.css";
6 |
7 | function App() {
8 | const [show, setShow] = createSignal(false);
9 |
10 | return (
11 |
, document.getElementById("app"));
20 |
--------------------------------------------------------------------------------
/test/valid/bindings/events/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { createSignal } from "solid-js";
4 |
5 | import "./style.css";
6 |
7 | function App() {
8 | const [pos, setPos] = createSignal({ x: 0, y: 0 });
9 |
10 | function handleMouseMove(event) {
11 | setPos({
12 | x: event.clientX,
13 | y: event.clientY,
14 | });
15 | }
16 |
17 | return (
18 |
, document.getElementById("app"));
25 |
--------------------------------------------------------------------------------
/test/valid/bindings/forwarding-refs/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { onMount, onCleanup } from "solid-js";
4 |
5 | import Canvas from "./canvas";
6 |
7 | function App() {
8 | let canvas;
9 | onMount(() => {
10 | const ctx = canvas.getContext("2d");
11 | let frame = requestAnimationFrame(loop);
12 |
13 | function loop(t) {
14 | frame = requestAnimationFrame(loop);
15 |
16 | const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
17 |
18 | for (let p = 0; p < imageData.data.length; p += 4) {
19 | const i = p / 4;
20 | const x = i % canvas.width;
21 | const y = (i / canvas.height) >>> 0;
22 |
23 | const r = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);
24 | const g = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1000);
25 | const b = 128;
26 |
27 | imageData.data[p + 0] = r;
28 | imageData.data[p + 1] = g;
29 | imageData.data[p + 2] = b;
30 | imageData.data[p + 3] = 255;
31 | }
32 |
33 | ctx.putImageData(imageData, 0, 0);
34 | }
35 |
36 | onCleanup(() => cancelAnimationFrame(frame));
37 | });
38 |
39 | return
, document.getElementById("app"));
43 |
--------------------------------------------------------------------------------
/test/valid/bindings/refs/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { onMount, onCleanup } from "solid-js";
4 |
5 | import "./style.css";
6 |
7 | function App() {
8 | let canvas;
9 | onMount(() => {
10 | const ctx = canvas.getContext("2d");
11 | let frame = requestAnimationFrame(loop);
12 |
13 | function loop(t) {
14 | frame = requestAnimationFrame(loop);
15 |
16 | const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
17 |
18 | for (let p = 0; p < imageData.data.length; p += 4) {
19 | const i = p / 4;
20 | const x = i % canvas.width;
21 | const y = (i / canvas.height) >>> 0;
22 |
23 | const r = 64 + (128 * x) / canvas.width + 64 * Math.sin(t / 1000);
24 | const g = 64 + (128 * y) / canvas.height + 64 * Math.cos(t / 1000);
25 | const b = 128;
26 |
27 | imageData.data[p + 0] = r;
28 | imageData.data[p + 1] = g;
29 | imageData.data[p + 2] = b;
30 | imageData.data[p + 3] = 255;
31 | }
32 |
33 | ctx.putImageData(imageData, 0, 0);
34 | }
35 |
36 | onCleanup(() => cancelAnimationFrame(frame));
37 | });
38 |
39 | return
, document.getElementById("app"));
43 |
--------------------------------------------------------------------------------
/test/valid/bindings/spreads/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import Info from "./info";
4 |
5 | const pkg = {
6 | name: "solid-js",
7 | version: 1,
8 | speed: "⚡️",
9 | website: "https://solidjs.com",
10 | };
11 |
12 | function App() {
13 | return
, document.getElementById("app"));
17 |
--------------------------------------------------------------------------------
/test/valid/bindings/style/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { createSignal } from "solid-js";
4 |
5 | function App() {
6 | const [num, setNum] = createSignal(0);
7 | setInterval(() => setNum((num() + 1) % 255), 30);
8 |
9 | return (
10 |
, document.getElementById("app"));
23 |
--------------------------------------------------------------------------------
/test/valid/control-flow/dynamic/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render, Dynamic } from "solid-js/web";
3 | import { createSignal, For } from "solid-js";
4 |
5 | const RedThing = () =>
;
8 |
9 | const options = {
10 | red: RedThing,
11 | green: GreenThing,
12 | blue: BlueThing,
13 | };
14 |
15 | function App() {
16 | const [selected, setSelected] = createSignal("red");
17 |
18 | return (
19 | <>
20 |
, document.getElementById("app"));
29 |
--------------------------------------------------------------------------------
/test/valid/control-flow/error-boundary/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { ErrorBoundary } from "solid-js";
4 |
5 | const Broken = () => {
6 | throw new Error("Oh No");
7 | return <>Never Getting Here;
8 | };
9 |
10 | function App() {
11 | return (
12 | <>
13 |
, document.getElementById("app"));
23 |
--------------------------------------------------------------------------------
/test/valid/control-flow/for/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { createSignal, For } from "solid-js";
4 |
5 | function App() {
6 | const [cats] = createSignal([
7 | { id: "J---aiyznGQ", name: "Keyboard Cat" },
8 | { id: "z_AbfPXTKms", name: "Maru" },
9 | { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" },
10 | ]);
11 |
12 | return (
13 |
, document.getElementById("app"));
28 |
--------------------------------------------------------------------------------
/test/valid/control-flow/index/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { createSignal, Index } from "solid-js";
4 |
5 | function App() {
6 | const [cats] = createSignal([
7 | { id: "J---aiyznGQ", name: "Keyboard Cat" },
8 | { id: "z_AbfPXTKms", name: "Maru" },
9 | { id: "OUtn3pvWmpg", name: "Henri The Existential Cat" },
10 | ]);
11 |
12 | return (
13 |
, document.getElementById("app"));
28 |
--------------------------------------------------------------------------------
/test/valid/control-flow/portal/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render, Portal } from "solid-js/web";
3 |
4 | function App() {
5 | return (
6 |
, document.getElementById("app"));
19 |
--------------------------------------------------------------------------------
/test/valid/control-flow/show/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { createSignal, Show } from "solid-js";
4 |
5 | function App() {
6 | const [loggedIn, setLoggedIn] = createSignal(false);
7 | const toggle = () => setLoggedIn(!loggedIn());
8 |
9 | return (
10 |
, document.getElementById("app"));
17 |
--------------------------------------------------------------------------------
/test/valid/control-flow/switch/main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { createSignal, Switch, Match } from "solid-js";
4 |
5 | function App() {
6 | const [x] = createSignal(7);
7 |
8 | return (
9 |
, document.getElementById("app"));
21 |
--------------------------------------------------------------------------------
/test/valid/examples/async-resource.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { createSignal, createResource } from "solid-js";
3 | import { render } from "solid-js/web";
4 |
5 | const fetchUser = async (id) => (await fetch(`https://swapi.dev/api/people/${id}/`)).json();
6 |
7 | const App = () => {
8 | const [userId, setUserId] = createSignal();
9 | const [user] = createResource(userId, fetchUser);
10 |
11 | return (
12 | <>
13 |
23 |
24 | );
25 | };
26 |
27 | render(App, document.getElementById("app"));
28 |
--------------------------------------------------------------------------------
/test/valid/examples/counter.jsx:
--------------------------------------------------------------------------------
1 | import { createSignal, onCleanup } from "solid-js";
2 | import { render } from "solid-js/web";
3 |
4 | const CountingComponent = () => {
5 | const [count, setCount] = createSignal(0);
6 | const interval = setInterval(() => setCount((c) => c + 1), 1000);
7 | onCleanup(function cleanup() {
8 | clearInterval(interval + count());
9 | });
10 | return
, document.getElementById("app"));
14 |
--------------------------------------------------------------------------------
/test/valid/examples/css-animations.jsx:
--------------------------------------------------------------------------------
1 | import { createSignal, For, Match, Switch } from "solid-js";
2 | import { render } from "solid-js/web";
3 | import { Transition, TransitionGroup } from "solid-transition-group";
4 | import "./styles.css";
5 |
6 | function shuffle(array) {
7 | return array.sort(() => Math.random() - 0.5);
8 | }
9 | let nextId = 10;
10 |
11 | const App = () => {
12 | const [show, toggleShow] = createSignal(true),
13 | [select, setSelect] = createSignal(0),
14 | [numList, setNumList] = createSignal([1, 2, 3, 4, 5, 6, 7, 8, 9]),
15 | randomIndex = () => Math.floor(Math.random() * numList().length);
16 |
17 | return (
18 | <>
19 |
112 |
113 | );
114 | };
115 |
116 | render(App, document.getElementById("app"));
117 |
--------------------------------------------------------------------------------
/test/valid/examples/familiar-and-modern.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { onCleanup, createSignal } from "solid-js";
4 |
5 | const CountingComponent = () => {
6 | const [count, setCount] = createSignal(0);
7 | const interval = setInterval(() => setCount((count) => count + 1), 1000);
8 | onCleanup(() => clearInterval(interval));
9 | return
, document.getElementById("app"));
13 |
--------------------------------------------------------------------------------
/test/valid/examples/formvalidation-main.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { createStore } from "solid-js/store";
4 | import { useForm } from "./validation";
5 | import "./styles.css";
6 |
7 | const EMAILS = ["johnsmith@outlook.com", "mary@gmail.com", "djacobs@move.org"];
8 |
9 | function fetchUserName(name) {
10 | return new Promise((resolve) => {
11 | setTimeout(() => resolve(EMAILS.indexOf(name) > -1), 200);
12 | });
13 | }
14 |
15 | const ErrorMessage = (props) =>
;
16 |
17 | const App = () => {
18 | const { validate, formSubmit, errors } = useForm({
19 | errorClass: "error-input",
20 | });
21 | const [fields, setFields] = createStore();
22 | const fn = (form) => {
23 | form.submit();
24 | console.log("Done");
25 | };
26 | const userNameExists = async ({ value }) => {
27 | const exists = await fetchUserName(value);
28 | return exists && `${value} is already being used`;
29 | };
30 | const matchesPassword = ({ value }) =>
31 | value === fields.password ? false : "Passwords must Match";
32 |
33 | return (
34 |
71 | );
72 | };
73 |
74 | render(App, document.getElementById("app"));
75 |
--------------------------------------------------------------------------------
/test/valid/examples/formvalidation-validation.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { createStore } from "solid-js/store";
3 |
4 | function checkValid({ element, validators = [] }, setErrors, errorClass) {
5 | return async () => {
6 | element.setCustomValidity("");
7 | element.checkValidity();
8 | let message = element.validationMessage;
9 | if (!message) {
10 | for (const validator of validators) {
11 | const text = await validator(element);
12 | if (text) {
13 | element.setCustomValidity(text);
14 | break;
15 | }
16 | }
17 | message = element.validationMessage;
18 | }
19 | if (message) {
20 | errorClass && element.classList.toggle(errorClass, true);
21 | setErrors({ [element.name]: message });
22 | }
23 | };
24 | }
25 |
26 | export function useForm({ errorClass }) {
27 | const [errors, setErrors] = createStore({}),
28 | fields = {};
29 |
30 | const validate = (ref, accessor) => {
31 | const validators = accessor() || [];
32 | let config;
33 | fields[ref.name] = config = { element: ref, validators };
34 | ref.onblur = checkValid(config, setErrors, errorClass);
35 | ref.oninput = () => {
36 | if (!errors[ref.name]) return;
37 | setErrors({ [ref.name]: undefined });
38 | errorClass && ref.classList.toggle(errorClass, false);
39 | };
40 | };
41 |
42 | const formSubmit = (ref, accessor) => {
43 | const callback = accessor() || (() => {});
44 | ref.setAttribute("novalidate", "");
45 | ref.onsubmit = async (e) => {
46 | e.preventDefault();
47 | let errored = false;
48 |
49 | for (const k in fields) {
50 | const field = fields[k];
51 | await checkValid(field, setErrors, errorClass)();
52 | if (!errored && field.element.validationMessage) {
53 | field.element.focus();
54 | errored = true;
55 | }
56 | }
57 | !errored && callback(ref);
58 | };
59 | };
60 |
61 | return { validate, formSubmit, errors };
62 | }
63 | a;
64 |
--------------------------------------------------------------------------------
/test/valid/examples/introduction-signals.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { render } from "solid-js/web";
3 | import { createSignal } from "solid-js";
4 |
5 | function Counter() {
6 | const [count] = createSignal(0);
7 |
8 | setTimeout(() => console.log(count()), 4500);
9 |
10 | return
, document.getElementById("app"));
14 |
--------------------------------------------------------------------------------
/test/valid/examples/simple-todos.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { createEffect, For } from "solid-js";
3 | import { createStore, SetStoreFunction, Store } from "solid-js/store";
4 | import { render } from "solid-js/web";
5 |
6 | // Checked but not used for demo purposes
7 | function createLocalStore