├── bin
    └── solid-codemod.js
├── .gitignore
├── src
    ├── transforms
    │   ├── solid@v2
    │   │   ├── jsx-classlist-to-class
    │   │   │   ├── test
    │   │   │   │   ├── expected.tsx
    │   │   │   │   └── input.tsx
    │   │   │   └── index.js
    │   │   ├── jsx-array-map-to-for
    │   │   │   ├── test
    │   │   │   │   ├── expected.tsx
    │   │   │   │   └── input.tsx
    │   │   │   └── index.ts
    │   │   └── jsx-properties-to-attributes
    │   │   │   ├── test
    │   │   │       ├── input.tsx
    │   │   │       └── expected.tsx
    │   │   │   └── index.js
    │   └── shared.js
    ├── data
    │   └── solid@v2
    │   │   ├── solid-jsx-types-to-json.js
    │   │   └── solid-markup.js
    ├── bin
    │   ├── run-transformer.js
    │   └── solid-codemod.js
    └── utils.js
├── tsconfig.json
├── release.mjs
├── LICENSE
├── package.json
├── .github
    └── ISSUE_TEMPLATE
    │   └── feature_request.yml
└── README.md


/bin/solid-codemod.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | 
3 | import '../src/bin/solid-codemod.js'
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | output.js
4 | output.jsx
5 | output.ts
6 | output.tsx
7 | data/test-data.json


--------------------------------------------------------------------------------
/src/transforms/solid@v2/jsx-classlist-to-class/test/expected.tsx:
--------------------------------------------------------------------------------
 1 | const test = [
 2 | 	<div class={{ selected: current() === 'foo' }} />,
 3 | 	<div
 4 | 		class={{ selected: current() === 'foo' }}
 5 | 		class={{ selected: current() === 'foo' }}
 6 | 	/>,
 7 | 	<div
 8 | 		class="red"
 9 | 		class={{ selected: current() === 'foo' }}
10 | 	/>,
11 | ]
12 | 


--------------------------------------------------------------------------------
/src/transforms/solid@v2/jsx-classlist-to-class/test/input.tsx:
--------------------------------------------------------------------------------
 1 | const test = [
 2 | 	<div classList={{ selected: current() === 'foo' }} />,
 3 | 	<div
 4 | 		classList={{ selected: current() === 'foo' }}
 5 | 		classList={{ selected: current() === 'foo' }}
 6 | 	/>,
 7 | 	<div
 8 | 		class="red"
 9 | 		classList={{ selected: current() === 'foo' }}
10 | 	/>,
11 | ]
12 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"allowJs": true,
 4 | 		"checkJs": true,
 5 | 		"strict": true,
 6 | 
 7 | 		"target": "ESNext",
 8 | 		"module": "ESNext",
 9 | 		"moduleResolution": "node",
10 | 		"allowSyntheticDefaultImports": true,
11 | 		"esModuleInterop": true,
12 | 		"jsx": "preserve",
13 | 		"jsxImportSource": "solid-js",
14 | 		"types": ["solid-js", "node", "@types/jscodeshift"],
15 | 		"noEmit": true,
16 | 		"isolatedModules": true,
17 | 
18 | 		"resolveJsonModule": true
19 | 	}
20 | }
21 | 


--------------------------------------------------------------------------------
/src/transforms/solid@v2/jsx-array-map-to-for/test/expected.tsx:
--------------------------------------------------------------------------------
 1 | import { createSignal, For } from 'solid-js'
 2 | 
 3 | const test = [
 4 | 	<div>
 5 | 		<For each={array1}>{el1 => <div>{el1.name}</div>}</For>
 6 | 	</div>,
 7 | 	<div>
 8 | 		<For each={array2}>{el2 => <div>{el2.name}</div>}</For>
 9 | 		<For each={array3}>{el3 => <div>{el4.name}</div>}</For>
10 | 	</div>,
11 | ]
12 | 
13 | export const Looper = () => {
14 | 	return (
15 | 		<div>
16 | 			<For each={array}>{el => <div>{el.name}</div>}</For>
17 | 		</div>
18 | 	)
19 | }
20 | 


--------------------------------------------------------------------------------
/src/transforms/solid@v2/jsx-array-map-to-for/test/input.tsx:
--------------------------------------------------------------------------------
 1 | import { createSignal } from 'solid-js'
 2 | 
 3 | const test = [
 4 | 	<div>
 5 | 		{array1.map(el1 => (
 6 | 			<div>{el1.name}</div>
 7 | 		))}
 8 | 	</div>,
 9 | 	<div>
10 | 		{array2.map(el2 => (
11 | 			<div>{el2.name}</div>
12 | 		))}
13 | 		{array3.map(el3 => (
14 | 			<div>{el4.name}</div>
15 | 		))}
16 | 	</div>,
17 | ]
18 | 
19 | export const Looper = () => {
20 | 	return (
21 | 		<div>
22 | 			{array.map(el => (
23 | 				<div>{el.name}</div>
24 | 			))}
25 | 		</div>
26 | 	)
27 | }
28 | 


--------------------------------------------------------------------------------
/release.mjs:
--------------------------------------------------------------------------------
 1 | import { execSync as $ } from 'child_process'
 2 | 
 3 | // bump version number
 4 | $('npm version minor --git-tag-version false')
 5 | 
 6 | // read version number
 7 | import('./package.json', {
 8 | 	with: { type: 'json' },
 9 | }).then(json => {
10 | 	const version = json.default.version
11 | 
12 | 	// git add, commit with version number
13 | 	$('git add --all')
14 | 	$('git commit -m "v' + version + '"')
15 | 	$('git tag "v' + version + '" -m "v' + version + '"')
16 | 
17 | 	// git push / npm publish
18 | 	$('git push --all')
19 | 	$('git push origin --tags')
20 | 	$('npm publish')
21 | })
22 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 David Di Biase, Tito Bouzout, SolidJS
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "solid-codemod",
 3 | 	"version": "2.4.0",
 4 | 	"description": "Codemod scripts for SolidJS JavaScript library",
 5 | 	"homepage": "https://github.com/solidjs-community/solid-codemod",
 6 | 	"license": "MIT",
 7 | 	"type": "module",
 8 | 	"bin": {
 9 | 		"solid-codemod": "bin/solid-codemod.js"
10 | 	},
11 | 	"scripts": {
12 | 		"test": "solid-codemod",
13 | 		"release": "node ./release.mjs"
14 | 	},
15 | 	"repository": {
16 | 		"type": "git",
17 | 		"url": "git+https://github.com/solidjs-community/solid-codemod.git"
18 | 	},
19 | 	"dependencies": {
20 | 		"@types/jscodeshift": "^17.3.0",
21 | 		"@types/node": "^22.15.21",
22 | 		"chalk": "^5.4.1",
23 | 		"cli-diff": "^1.0.0",
24 | 		"jscodeshift": "^17.3.0",
25 | 		"prettier": "^3.5.3",
26 | 		"solid-js": "^2.0.0-experimental.5",
27 | 		"typescript": "^5.8.3"
28 | 	},
29 | 	"prettier": {
30 | 		"printWidth": 70,
31 | 		"useTabs": true,
32 | 		"semi": false,
33 | 		"singleQuote": true,
34 | 		"quoteProps": "as-needed",
35 | 		"jsxSingleQuote": false,
36 | 		"trailingComma": "all",
37 | 		"bracketSpacing": true,
38 | 		"bracketSameLine": false,
39 | 		"arrowParens": "avoid",
40 | 		"proseWrap": "never",
41 | 		"endOfLine": "lf",
42 | 		"singleAttributePerLine": true,
43 | 		"embeddedLanguageFormatting": "off"
44 | 	}
45 | }
46 | 


--------------------------------------------------------------------------------
/src/data/solid@v2/solid-jsx-types-to-json.js:
--------------------------------------------------------------------------------
 1 | import { read, write } from '../../utils.js'
 2 | 
 3 | const test = false
 4 | 
 5 | // data
 6 | 
 7 | const destination = './jsx.json'
 8 | 
 9 | const o = JSON.parse(
10 | 	!test
11 | 		? await fetch(
12 | 				'https://raw.githubusercontent.com/potahtml/namespace-jsx-project/refs/heads/master/jsx/data.json',
13 | 			).then(x => x.text())
14 | 		: read('./test-data.json'),
15 | )
16 | 
17 | const solidV2Key = 'Solid Next'
18 | 
19 | const result = {
20 | 	tags: {},
21 | 	attributes: {
22 | 		global: {},
23 | 		custom: {
24 | 			ref: true,
25 | 			children: true,
26 | 		},
27 | 	},
28 | }
29 | 
30 | // tags data
31 | 
32 | for (const ns in o.elements) {
33 | 	for (const tag in o.elements[ns]) {
34 | 		result.tags[tag] = result.tags[tag] || {}
35 | 		for (const [key, entry] of Object.entries(
36 | 			o.elements[ns][tag].keys,
37 | 		)) {
38 | 			const value = entry.values[solidV2Key]
39 | 			if (value) {
40 | 				result.tags[tag][key] = value
41 | 			}
42 | 		}
43 | 	}
44 | }
45 | 
46 | // globals data
47 | 
48 | for (const interfaceName of [
49 | 	'Element',
50 | 	'HTMLElement',
51 | 	'MathMLElement',
52 | 	'SVGElement',
53 | ]) {
54 | 	for (const [key, entry] of Object.entries(
55 | 		o.keys[interfaceName].keys,
56 | 	)) {
57 | 		const value = entry.values[solidV2Key]
58 | 		if (value) {
59 | 			result.attributes.global[key] = value
60 | 		}
61 | 	}
62 | }
63 | 
64 | // save
65 | 
66 | write(destination, JSON.stringify(result, null, 2))
67 | 


--------------------------------------------------------------------------------
/src/transforms/solid@v2/jsx-classlist-to-class/index.js:
--------------------------------------------------------------------------------
 1 | import { SolidMarkupV2 } from '../../../data/solid@v2/solid-markup.js'
 2 | 
 3 | import {
 4 | 	log,
 5 | 	getAttributeNameAndValueFromJSXAttribute,
 6 | 	getTagNameFromJSXElement,
 7 | } from '../../shared.js'
 8 | 
 9 | /**
10 |  * This transform provides the following when reliable possible:
11 |  *
12 |  * - Trasnforms `classList` to `class`
13 |  *
14 |  * @param {import('jscodeshift').FileInfo} file
15 |  * @param {import('jscodeshift').API} api
16 |  */
17 | export default function transformer(file, api) {
18 | 	const j = api.jscodeshift
19 | 	const root = j(file.source)
20 | 
21 | 	root.find(j.JSXElement).forEach(path => {
22 | 		const tagName = getTagNameFromJSXElement(api, path)
23 | 
24 | 		if (!SolidMarkupV2.isKnownTag(tagName)) {
25 | 			// skip JSX Components and unknown tags
26 | 			return
27 | 		}
28 | 
29 | 		const attributes = path.node.openingElement.attributes
30 | 
31 | 		attributes.slice().forEach(attr => {
32 | 			if (attr.type === 'JSXAttribute') {
33 | 				// get name and value
34 | 				let [attributeName, attributeValue] =
35 | 					getAttributeNameAndValueFromJSXAttribute(api, attr)
36 | 
37 | 				if (attributeName === 'classList') {
38 | 					const newName = 'class'
39 | 
40 | 					log(
41 | 						file,
42 | 						`renamed attribute ´${attributeName}´ to ´${newName}´ on tag ´${tagName}´`,
43 | 					)
44 | 					attributeName = newName
45 | 					attr.name = j.jsxIdentifier(newName)
46 | 				}
47 | 			}
48 | 		})
49 | 	})
50 | 
51 | 	return root.toSource()
52 | }
53 | 


--------------------------------------------------------------------------------
/src/bin/run-transformer.js:
--------------------------------------------------------------------------------
 1 | import { createRequire } from 'node:module'
 2 | import { spawn } from 'node:child_process'
 3 | 
 4 | const require = createRequire(import.meta.url)
 5 | const jscodeshiftExecutable = require.resolve('.bin/jscodeshift')
 6 | 
 7 | /**
 8 |  * To make `process.(stdout/stdin).write` display colors on `wsl` and
 9 |  * possibly other places. Although I am not sure if this is my
10 |  * personal config that needs to be set to display colors, instead of
11 |  * forcing the colors.
12 |  */
13 | process.env.FORCE_COLOR = '1'
14 | 
15 | export async function runTransformer(transformer, files, write) {
16 | 	const parser = /(tsx|ts)$/.test(files[0]) ? 'tsx' : 'babel'
17 | 
18 | 	const args = [
19 | 		jscodeshiftExecutable,
20 | 		'--verbose=0',
21 | 		'--ignore-pattern=**/node_modules/**',
22 | 		'--parser',
23 | 		parser,
24 | 		'--transform',
25 | 		transformer,
26 | 		'--stdin',
27 | 	]
28 | 
29 | 	if (!write) {
30 | 		args.push('--dry')
31 | 	}
32 | 
33 | 	parser === 'tsx'
34 | 		? args.push('--extensions=tsx,ts,jsx,js')
35 | 		: args.push('--extensions=jsx,js')
36 | 
37 | 	const child = spawn('node', args)
38 | 
39 | 	child.stdout.on('data', chunk => {
40 | 		if (chunk.toString().includes('ERR')) {
41 | 			process.stdout.write(chunk)
42 | 			process.exit(1)
43 | 		}
44 | 		queueMicrotask(() => process.stdout.write(chunk))
45 | 	})
46 | 	child.stderr.on('data', chunk =>
47 | 		queueMicrotask(() => process.stderr.write(chunk)),
48 | 	)
49 | 
50 | 	child.stdin.write(files.join('\n'))
51 | 	child.stdin.end()
52 | 
53 | 	return new Promise((resolve, reject) => {
54 | 		child.on('exit', resolve)
55 | 	})
56 | }
57 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.yml:
--------------------------------------------------------------------------------
 1 | name: Feature Request
 2 | description: These issues are for **concrete and actionable proposals**. If you just have
 3 |   a general problem that you would like to brainstorm, open a Discussion instead.
 4 | title: "[Feature]: "
 5 | labels: ["enhancement"]
 6 | 
 7 | body:
 8 |   - type: textarea
 9 |     attributes:
10 |       label: Input code
11 |       description: |
12 |         Provide a minimal code for which you need transformation to be supported.
13 |       placeholder: |
14 |         ```ts
15 |         import React, { useState, useEffect } from "react";
16 |         import { render } from "react-dom"; 
17 | 
18 |         const CountingComponent = () => {
19 |           const [count, setCount] = useState(0);
20 |           useEffect(() => {
21 |             const interval = setInterval(() => setCount(count + 1), 1000);
22 |             return () => {
23 |               clearInterval(interval);
24 |             };
25 |           }, []);
26 |           return <div>Count value is {count}</div>;
27 |         }
28 | 
29 |         render(() => <CountingComponent />, document.getElementById("app"));
30 |         ```
31 |     validations:
32 |       required: true
33 | 
34 |   - type: textarea
35 |     attributes:
36 |       label: Expected Output
37 |       description: The expected transformed output for the provided code snippet.
38 |       placeholder: |
39 |         ```ts
40 |         import { createSignal, onCleanup, onMount } from "solid-js";
41 |         import { render } from "solid-js/web";
42 | 
43 |         const CountingComponent = () => {
44 |           const [count, setCount] = createSignal(0);
45 |           onMount(() => {
46 |             const interval = setInterval(() => setCount(count + 1), 1000);
47 |             onCleanup(() => clearInterval(interval));
48 |           });
49 |           return <div>Count value is {count()}</div>;
50 |         };
51 | 
52 |         render(() => <CountingComponent />, document.getElementById("app"));
53 |         ```
54 | 
55 |   - type: textarea
56 |     attributes:
57 |       label: Additional context
58 |       description: |
59 |         Add any other context about the problem here.
60 |       placeholder: |
61 |         Example transform to convert useState/useEffect of ReactJS to createSignal/onCleanup of SolidJS.
62 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | import fs from 'fs'
 2 | import path from 'path'
 3 | import { execSync as $ } from 'child_process'
 4 | import { fileURLToPath } from 'url'
 5 | 
 6 | import chalk from 'chalk'
 7 | import diff from 'cli-diff'
 8 | 
 9 | const __filename = fileURLToPath(import.meta.url)
10 | export const root = path.dirname(path.dirname(__filename))
11 | 
12 | export const log = string => console.log('\n' + string)
13 | export const red = string => log(chalk.redBright(string))
14 | export const blueBright = string => log(chalk.cyanBright(string))
15 | export const blue = string => log(chalk.cyan(string))
16 | export const green = string => log(chalk.greenBright(string))
17 | 
18 | export const read = path =>
19 | 	fs.readFileSync(path, { encoding: 'utf8' })
20 | 
21 | export const write = (path, content) =>
22 | 	fs.writeFileSync(path, content)
23 | 
24 | export const copy = (source, destination) =>
25 | 	fs.copyFileSync(source, destination)
26 | 
27 | export const exists = path => fs.existsSync(path)
28 | 
29 | export const remove = path => {
30 | 	try {
31 | 		fs.rmSync(path)
32 | 	} catch (e) {}
33 | }
34 | 
35 | /** @returns {string[]} */
36 | export const getFiles = (...args) =>
37 | 	/** @type {string[]} */
38 | 	[
39 | 		...new Set(
40 | 			args
41 | 				.flat(Infinity)
42 | 				.map(a => getFilesRecurse(a))
43 | 				.flat(Infinity),
44 | 		),
45 | 	].filter(x => /\.(tsx|ts|jsx|js)$/.test(x))
46 | 
47 | /** @returns {string[]} */
48 | const getFilesRecurse = (source, files = []) => {
49 | 	if (!fs.existsSync(source)) {
50 | 		throw new Error(`path "${source}" doesn't exists`)
51 | 	}
52 | 
53 | 	if (/(\.git|node_modules)/.test(source)) {
54 | 	} else if (fs.statSync(source).isDirectory()) {
55 | 		for (const file of fs.readdirSync(source)) {
56 | 			getFilesRecurse(path.join(source, file), files)
57 | 		}
58 | 	} else {
59 | 		files.push(source)
60 | 	}
61 | 	return files
62 | }
63 | 
64 | /** @returns {string[]} */
65 | export const getDirectories = source =>
66 | 	/** @type {string[]} */ fs
67 | 		.readdirSync(source, { withFileTypes: true })
68 | 		.filter(dirent => dirent.isDirectory())
69 | 		.map(dirent => dirent.name)
70 | 
71 | export const prettier = file =>
72 | 	$(
73 | 		`prettier "${file}" --write --config "${root}/package.json" --no-editorconfig --ignore-path="false"`,
74 | 	)
75 | 
76 | export const diffFiles = (a, b) => (diff.default || diff)(a, b)
77 | 


--------------------------------------------------------------------------------
/src/transforms/solid@v2/jsx-array-map-to-for/index.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 | 	ASTPath,
  3 | 	CallExpression,
  4 | 	FunctionExpression,
  5 | 	ImportDeclaration,
  6 | 	MemberExpression,
  7 | 	FileInfo,
  8 | 	API,
  9 | } from 'jscodeshift'
 10 | 
 11 | import {
 12 | 	log,
 13 | 	getAttributeNameAndValueFromJSXAttribute,
 14 | 	getTagNameFromJSXElement,
 15 | } from '../../shared.js'
 16 | 
 17 | /**
 18 |  * This transform provides the following when reliable possible:
 19 |  *
 20 |  * - Trasnforms `array.map` to `<For` component
 21 |  */
 22 | export default function transformer(file: FileInfo, api: API) {
 23 | 	const j = api.jscodeshift
 24 | 	const root = j(file.source)
 25 | 
 26 | 	const importsRequired = new Set<string>()
 27 | 
 28 | 	// Replace JSX expression {<expression>.map(fn)} with <For each={expression}>{fn}</For>
 29 | 	root
 30 | 		.find(j.JSXExpressionContainer)
 31 | 		.filter(path => {
 32 | 			// We only care about JSX expression containers whose parents are JSX elements.
 33 | 			// (in other words, exclude attribute expressions.)
 34 | 			if (
 35 | 				path.parent.node.type === 'JSXElement' &&
 36 | 				path.node.expression.type === 'CallExpression'
 37 | 			) {
 38 | 				const call = path.node.expression
 39 | 				if (
 40 | 					call.callee.type === 'MemberExpression' &&
 41 | 					call.callee.property.type === 'Identifier' &&
 42 | 					call.callee.property.name === 'map'
 43 | 				) {
 44 | 					return true
 45 | 				}
 46 | 			}
 47 | 			return false
 48 | 		})
 49 | 		.replaceWith(path => {
 50 | 			const call = path.node.expression as CallExpression
 51 | 			const callee = call.callee as MemberExpression
 52 | 			importsRequired.add('For')
 53 | 			return j.jsxElement.from({
 54 | 				openingElement: j.jsxOpeningElement(j.jsxIdentifier('For'), [
 55 | 					j.jsxAttribute.from({
 56 | 						name: j.jsxIdentifier('each'),
 57 | 						value: j.jsxExpressionContainer.from({
 58 | 							expression: callee.object,
 59 | 						}),
 60 | 					}),
 61 | 				]),
 62 | 				closingElement: j.jsxClosingElement(j.jsxIdentifier('For')),
 63 | 				selfClosing: false,
 64 | 				children: [
 65 | 					j.jsxExpressionContainer.from({
 66 | 						expression: call.arguments.at(0) as FunctionExpression,
 67 | 					}),
 68 | 				],
 69 | 			})
 70 | 		})
 71 | 
 72 | 	// See whether we need to add any imports
 73 | 	if (importsRequired.size > 0) {
 74 | 		// Look for solid-js import
 75 | 		let lastImport: ASTPath<ImportDeclaration> | null = null
 76 | 		let solidImport = root
 77 | 			.find(j.ImportDeclaration)
 78 | 			.map(path => {
 79 | 				lastImport = path
 80 | 				return path
 81 | 			})
 82 | 			.filter(path => path.node.source.value === 'solid-js')
 83 | 			.forEach(path => {
 84 | 				if (!path.node.specifiers) {
 85 | 					path.node.specifiers = []
 86 | 				}
 87 | 				path.node.specifiers?.forEach(spec => {
 88 | 					if (spec.type === 'ImportSpecifier') {
 89 | 						importsRequired.delete(spec.imported.name)
 90 | 					}
 91 | 				})
 92 | 
 93 | 				for (const symbol of importsRequired) {
 94 | 					path.node.specifiers.push(
 95 | 						j.importSpecifier.from({
 96 | 							imported: j.jsxIdentifier(symbol),
 97 | 						}),
 98 | 					)
 99 | 				}
100 | 			})
101 | 
102 | 		if (solidImport.length == 0) {
103 | 			// Insert new solid import statement.
104 | 			const solidImport = j.importDeclaration.from({
105 | 				source: j.stringLiteral('solid-js'),
106 | 				specifiers: Array.from(importsRequired).map(symbol =>
107 | 					j.importSpecifier.from({
108 | 						imported: j.jsxIdentifier(symbol),
109 | 					}),
110 | 				),
111 | 			})
112 | 			lastImport!.insertAfter(solidImport)
113 | 		}
114 | 	}
115 | 
116 | 	return root.toSource()
117 | }
118 | 


--------------------------------------------------------------------------------
/src/transforms/solid@v2/jsx-properties-to-attributes/test/input.tsx:
--------------------------------------------------------------------------------
  1 | const o = {
  2 | 	// unfortunally we cannot change this
  3 | 	autoFocus: true,
  4 | }
  5 | 
  6 | const quack = 'duck'
  7 | 
  8 | const test = [
  9 | 	<video {...o} />,
 10 | 	<div aria-hidden />,
 11 | 	<div aria-hidden="" />,
 12 | 	<div aria-hidden="0" />,
 13 | 	<div aria-hidden="1" />,
 14 | 	<div aria-hidden="false" />,
 15 | 	<div aria-hidden="False" />,
 16 | 	<div aria-hidden="true" />,
 17 | 	<div aria-hidden={'false'} />,
 18 | 	<div aria-hidden={'true'} />,
 19 | 	<div aria-hidden={() => {}} />,
 20 | 	<div aria-hidden={0} />,
 21 | 	<div aria-hidden={1} />,
 22 | 	<div aria-hidden={6} />,
 23 | 	<div aria-hidden={false} />,
 24 | 	<div aria-hidden={function () {}} />,
 25 | 	<div aria-hidden={quack ? 'true' : 'false'} />,
 26 | 	<div aria-hidden={quack ? true : true} />,
 27 | 	<div aria-hidden={quack ? false : false} />,
 28 | 	<div aria-hidden={quack ? 'true' : 'true'} />,
 29 | 	<div aria-hidden={quack ? 'false' : 'false'} />,
 30 | 	<div aria-hidden={quack ?? 'true'} />,
 31 | 	<div aria-hidden={quack ?? 'false'} />,
 32 | 	<div aria-hidden={quack ?? true} />,
 33 | 	<div aria-hidden={quack ?? false} />,
 34 | 	<div aria-hidden={quack || 'true'} />,
 35 | 	<div aria-hidden={quack || true} />,
 36 | 	<div aria-hidden={quack || 'false'} />,
 37 | 	<div aria-hidden={quack || false} />,
 38 | 	<div aria-hidden={quack && 'true'} />,
 39 | 	<div aria-hidden={quack && true} />,
 40 | 	<div aria-hidden={quack && 'false'} />,
 41 | 	<div aria-hidden={quack && false} />,
 42 | 	<div aria-hidden={quack.quack} />,
 43 | 	<div aria-hidden={quack} />,
 44 | 	<div aria-hidden={signal()} />,
 45 | 	<div aria-hidden={true} />,
 46 | 	<div aria-hidden={undefined} />,
 47 | 	<div aria-hidden={null} />,
 48 | 	<div aria-hidden={void 0} />,
 49 | 	<div autofocus />,
 50 | 	<div autofocus="" />,
 51 | 	<div autofocus="0" />,
 52 | 	<div autofocus="1" />,
 53 | 	<div autofocus="false" />,
 54 | 	<div autofocus="true" />,
 55 | 	<div autofocus={'false'} />,
 56 | 	<div autofocus={'true'} />,
 57 | 	<div autofocus={() => {}} />,
 58 | 	<div autofocus={0} />,
 59 | 	<div autofocus={1} />,
 60 | 	<div autofocus={6} />,
 61 | 	<div autofocus={false} />,
 62 | 	<div autofocus={function () {}} />,
 63 | 	<div autofocus={quack ? true : true} />,
 64 | 	<div autofocus={quack ? false : false} />,
 65 | 	<div autofocus={quack ? 'true' : 'true'} />,
 66 | 	<div autofocus={quack ? 'false' : 'false'} />,
 67 | 	<div autofocus={quack ?? 'true'} />,
 68 | 	<div autofocus={quack ?? 'false'} />,
 69 | 	<div autofocus={quack ?? true} />,
 70 | 	<div autofocus={quack ?? false} />,
 71 | 	<div autofocus={quack || 'true'} />,
 72 | 	<div autofocus={quack || true} />,
 73 | 	<div autofocus={quack || 'false'} />,
 74 | 	<div autofocus={quack || false} />,
 75 | 	<div autofocus={quack && 'true'} />,
 76 | 	<div autofocus={quack && true} />,
 77 | 	<div autofocus={quack && 'false'} />,
 78 | 	<div autofocus={quack && false} />,
 79 | 	<div autofocus={quack.quack} />,
 80 | 	<div autofocus={quack} />,
 81 | 	<div autofocus={signal()} />,
 82 | 	<div autofocus={true} />,
 83 | 	<div autofocus={undefined} />,
 84 | 	<div autofocus={null} />,
 85 | 	<div autofocus={void 0} />,
 86 | 	<video
 87 | 		disableRemotePlayback={true}
 88 | 		playsInline={false}
 89 | 		somethingMadeUp={false}
 90 | 	></video>,
 91 | 	<my-el do-not-warn />,
 92 | 	<div dowarnme />,
 93 | 	<div onClick={() => {}} />,
 94 | 	<form attr:onsubmit="return false;" />,
 95 | 	<form attr:onsubmit={'return false;'} />,
 96 | 	<form attr:onsubmit={true && 'return false;'} />,
 97 | 	<form onsubmit="return false;" />,
 98 | 	<form onsubmit={'return false;'} />,
 99 | 	<form onsubmit={e => {}} />,
100 | 	<form onsubmit={function (e) {}} />,
101 | 	<form onsubmit={true && 'return false;'} />,
102 | 	<form onsubmit={true && 'return false;'} />,
103 | ]
104 | 


--------------------------------------------------------------------------------
/src/transforms/solid@v2/jsx-properties-to-attributes/test/expected.tsx:
--------------------------------------------------------------------------------
  1 | const o = {
  2 | 	// unfortunally we cannot change this
  3 | 	autoFocus: true,
  4 | }
  5 | 
  6 | const quack = 'duck'
  7 | 
  8 | const test = [
  9 | 	<video {...o} />,
 10 | 	<div aria-hidden={'true'} />,
 11 | 	<div aria-hidden="" />,
 12 | 	<div aria-hidden="0" />,
 13 | 	<div aria-hidden="1" />,
 14 | 	<div aria-hidden="false" />,
 15 | 	<div aria-hidden="False" />,
 16 | 	<div aria-hidden="true" />,
 17 | 	<div aria-hidden={'false'} />,
 18 | 	<div aria-hidden={'true'} />,
 19 | 	<div aria-hidden={() => {}} />,
 20 | 	<div aria-hidden={0} />,
 21 | 	<div aria-hidden={1} />,
 22 | 	<div aria-hidden={6} />,
 23 | 	<div aria-hidden={'false'} />,
 24 | 	<div aria-hidden={function () {}} />,
 25 | 	<div aria-hidden={quack ? 'true' : 'false'} />,
 26 | 	<div aria-hidden={quack ? 'true' : 'true'} />,
 27 | 	<div aria-hidden={quack ? 'false' : 'false'} />,
 28 | 	<div aria-hidden={quack ? 'true' : 'true'} />,
 29 | 	<div aria-hidden={quack ? 'false' : 'false'} />,
 30 | 	<div aria-hidden={quack ?? 'true'} />,
 31 | 	<div aria-hidden={quack ?? 'false'} />,
 32 | 	<div aria-hidden={quack ?? 'true'} />,
 33 | 	<div aria-hidden={quack ?? 'false'} />,
 34 | 	<div aria-hidden={quack || 'true'} />,
 35 | 	<div aria-hidden={quack || 'true'} />,
 36 | 	<div aria-hidden={quack || 'false'} />,
 37 | 	<div aria-hidden={quack || 'false'} />,
 38 | 	<div aria-hidden={quack && 'true'} />,
 39 | 	<div aria-hidden={quack && 'true'} />,
 40 | 	<div aria-hidden={quack && 'false'} />,
 41 | 	<div aria-hidden={quack && 'false'} />,
 42 | 	<div aria-hidden={quack.quack} />,
 43 | 	<div aria-hidden={quack} />,
 44 | 	<div aria-hidden={signal()} />,
 45 | 	<div aria-hidden={'true'} />,
 46 | 	<div aria-hidden={undefined} />,
 47 | 	<div aria-hidden={null} />,
 48 | 	<div aria-hidden={void 0} />,
 49 | 	<div autofocus />,
 50 | 	<div autofocus={true} />,
 51 | 	<div autofocus={true} />,
 52 | 	<div autofocus={true} />,
 53 | 	<div autofocus={false} />,
 54 | 	<div autofocus={true} />,
 55 | 	<div autofocus={false} />,
 56 | 	<div autofocus={true} />,
 57 | 	<div autofocus={() => {}} />,
 58 | 	<div autofocus={false} />,
 59 | 	<div autofocus={true} />,
 60 | 	<div autofocus={true} />,
 61 | 	<div autofocus={false} />,
 62 | 	<div autofocus={function () {}} />,
 63 | 	<div autofocus={quack ? true : true} />,
 64 | 	<div autofocus={quack ? false : false} />,
 65 | 	<div autofocus={quack ? true : true} />,
 66 | 	<div autofocus={quack ? false : false} />,
 67 | 	<div autofocus={quack ?? true} />,
 68 | 	<div autofocus={quack ?? false} />,
 69 | 	<div autofocus={quack ?? true} />,
 70 | 	<div autofocus={quack ?? false} />,
 71 | 	<div autofocus={quack || true} />,
 72 | 	<div autofocus={quack || true} />,
 73 | 	<div autofocus={quack || false} />,
 74 | 	<div autofocus={quack || false} />,
 75 | 	<div autofocus={quack && true} />,
 76 | 	<div autofocus={quack && true} />,
 77 | 	<div autofocus={quack && false} />,
 78 | 	<div autofocus={quack && false} />,
 79 | 	<div autofocus={quack.quack} />,
 80 | 	<div autofocus={quack} />,
 81 | 	<div autofocus={signal()} />,
 82 | 	<div autofocus={true} />,
 83 | 	<div autofocus={undefined} />,
 84 | 	<div autofocus={null} />,
 85 | 	<div autofocus={void 0} />,
 86 | 	<video
 87 | 		disableremoteplayback={true}
 88 | 		playsinline={false}
 89 | 		somethingMadeUp={false}
 90 | 	></video>,
 91 | 	<my-el do-not-warn />,
 92 | 	<div dowarnme />,
 93 | 	<div onClick={() => {}} />,
 94 | 	<form attr:onsubmit="return false;" />,
 95 | 	<form attr:onsubmit={'return false;'} />,
 96 | 	<form attr:onsubmit={true && 'return false;'} />,
 97 | 	<form attr:onsubmit="return false;" />,
 98 | 	<form attr:onsubmit={'return false;'} />,
 99 | 	<form onsubmit={e => {}} />,
100 | 	<form onsubmit={function (e) {}} />,
101 | 	<form onsubmit={true && 'return false;'} />,
102 | 	<form onsubmit={true && 'return false;'} />,
103 | ]
104 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p>
  2 |   <img width="100%" src="https://assets.solidjs.com/banner?type=Codemod&background=tiles&project=%20" alt="Solid ARIA">
  3 | </p>
  4 | 
  5 | # Solid Codemod
  6 | 
  7 | Codemod scripts for upgrading [SolidJS][solidjs] APIs and code,
  8 | powered by [JSCodeshift][jscodeshift].
  9 | 
 10 | ## Usage
 11 | 
 12 | `npx solid-codemod <transforms> <paths> --write`
 13 | 
 14 | - `transforms` - transforms names
 15 | - `paths` - directories or files to transform
 16 | - `--write` or `-w` - write changes (it defaults to dry run)
 17 | 
 18 | NOTES:
 19 | 
 20 | - It doesnt accept or use globs.
 21 | - Many `transforms` or `paths` can be provided separated by spaces
 22 | - When `paths` is not provided it runs tests on the selected
 23 |   transforms
 24 | - Once its done it will display a green `DONE`
 25 | - Transforms should modify code when "reliable possible"
 26 | 
 27 | ## Examples
 28 | 
 29 | - `solid-codemod` - run all transforms internal tests.
 30 | - `solid-codemod solid@v2/jsx-properties-to-attributes` - run internal
 31 |   tests for selected transform.
 32 | - `solid-codemod solid@v2/jsx-properties-to-attributes .` - dry run
 33 |   transform on current directory.
 34 | - `solid-codemod solid@v2/jsx-properties-to-attributes . -w` - run
 35 |   transform on current directory and write changes to files.
 36 | 
 37 | ## Codemod Transforms
 38 | 
 39 | ### `solid@v2/jsx-properties-to-attributes`
 40 | 
 41 | Used to update JSX properties vs attributes, from Solid 1.x to Solid
 42 | 2.x.
 43 | 
 44 | - CamelCase attributes to lowercase on known tags (not in components)
 45 | - Unwrap `attr:` for known attributes
 46 | - `onsubmit="return false"` -> `attr:onsubmit="return false"`
 47 | - Ensure `boolean` attributes values (for static/conditional values)
 48 | - Ensure `pseudo-boolean` attributes values (for static/conditional
 49 |   values)
 50 | - Warn of unknown attributes
 51 | 
 52 | Warning: Do not use in already established Solid 2.x code as it
 53 | assumes the code is Solid 1.x. For example `false` is a valid way to
 54 | remove an attribute in Solid 2.x, while in Solid 1.x it means to have
 55 | an attribute with that value.
 56 | 
 57 | ### `solid@v2/jsx-classlist-to-class`
 58 | 
 59 | Used to rename `classList` attribute to `class`
 60 | https://docs.solidjs.com/concepts/components/class-style
 61 | 
 62 | ### `solid@v2/jsx-array-map-to-for`
 63 | 
 64 | Used to change `array.map` into the `<For/>` Solid component
 65 | https://docs.solidjs.com/reference/components/for
 66 | 
 67 | ## Writing Transforms
 68 | 
 69 | 1. Look at the `transforms` folder, duplicate and edit a transform.
 70 | 2. Test your transform with
 71 |    `solid-codemod solid@v2/your-transform-name`
 72 | 3. Add the transform to the readme with a description
 73 | 4. May use `src/transforms/shared.js` for shared code
 74 | 
 75 | ### Helpers
 76 | 
 77 | Some shared code exits for helping author transforms.
 78 | 
 79 | - `src/transforms/shared.js` - helpers for parsing and logging changes
 80 |   to console.
 81 | - `src/data` - data helpers for specific Solid versions
 82 | 
 83 | ## Contributing
 84 | 
 85 | We're currently looking for transformations which SolidJS community is
 86 | interested in. Please create a [feature request][feature-request] or
 87 | upvote/comment on [existing feature
 88 | requests][feature-request-existing] which have the input and output
 89 | code of the transformation you are looking for.
 90 | 
 91 | For example, here is a feature request to [transform
 92 | useState/useEffect of ReactJS to createSignal/onCleanup of
 93 | SolidJS][feature-request-example] for your reference.
 94 | 
 95 | ## TODO
 96 | 
 97 | - transfer npm to the solid project
 98 | - figure out how to autopublish to npm
 99 | 
100 | ## License
101 | 
102 | MIT
103 | 
104 | [feature-request]:
105 |   https://github.com/trivikr/solid-codemod/issues/new?assignees=&labels=enhancement&template=feature_request.yml&title=%5BFeature%5D%3A+
106 | [feature-request-example]:
107 |   https://github.com/trivikr/solid-codemod/issues/1
108 | [feature-request-existing]:
109 |   https://github.com/trivikr/solid-codemod/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Aenhancement
110 | [jscodeshift]: https://github.com/facebook/jscodeshift
111 | [solidjs]: https://www.solidjs.com/
112 | 


--------------------------------------------------------------------------------
/src/transforms/shared.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @param {import('jscodeshift').API} api
  3 |  * @param {import('jscodeshift').ASTPath<
  4 |  * 	import('jscodeshift').JSXElement
  5 |  * >} path
  6 |  * @returns {string}
  7 |  */
  8 | export function getTagNameFromJSXElement(api, path) {
  9 | 	const j = api.jscodeshift
 10 | 
 11 | 	let tagName
 12 | 
 13 | 	const nameNode = path.node.openingElement.name
 14 | 
 15 | 	switch (nameNode.type) {
 16 | 		case 'JSXIdentifier':
 17 | 			tagName = nameNode.name
 18 | 			break
 19 | 		case 'JSXMemberExpression':
 20 | 			let parts = []
 21 | 			let current = nameNode
 22 | 			while (current.type === 'JSXMemberExpression') {
 23 | 				parts.unshift(current.property.name)
 24 | 				current = current.object
 25 | 			}
 26 | 			parts.unshift(current.name)
 27 | 			tagName = parts.join('.')
 28 | 			break
 29 | 		case 'JSXNamespacedName':
 30 | 			tagName = `${nameNode.namespace.name}:${nameNode.name.name}`
 31 | 			break
 32 | 		default: {
 33 | 			throw new Error(`[Unknown Tag Type: ${nameNode.type}]`)
 34 | 		}
 35 | 	}
 36 | 
 37 | 	return tagName
 38 | }
 39 | 
 40 | /**
 41 |  * Returns tuple with attribute name as string. and for value it
 42 |  * unwraps expressions.
 43 |  *
 44 |  * @param {import('jscodeshift').API} api
 45 |  * @param {import('jscodeshift').JSXAttribute} attr
 46 |  * @returns {[
 47 |  * 	string,
 48 |  * 	import('jscodeshift').Expression | undefined | null,
 49 |  * ]}
 50 |  */
 51 | export function getAttributeNameAndValueFromJSXAttribute(api, attr) {
 52 | 	const j = api.jscodeshift
 53 | 
 54 | 	let attributeName
 55 | 	let attributeValue
 56 | 
 57 | 	const nameNode = attr.name
 58 | 	const valueNode = attr.value
 59 | 
 60 | 	// name
 61 | 	if (nameNode.type === 'JSXIdentifier') {
 62 | 		attributeName = nameNode.name
 63 | 	} else if (nameNode.type === 'JSXNamespacedName') {
 64 | 		attributeName = `${nameNode.namespace.name}:${nameNode.name.name}`
 65 | 	} else {
 66 | 		throw new Error(`[Unknown Attribute Type: ${nameNode.type}]`)
 67 | 	}
 68 | 
 69 | 	// value
 70 | 	attributeValue = valueNode
 71 | 	// .expression is unwrapped
 72 | 	while (
 73 | 		attributeValue &&
 74 | 		attributeValue.type === 'JSXExpressionContainer'
 75 | 	) {
 76 | 		attributeValue = attributeValue.expression
 77 | 	}
 78 | 
 79 | 	return [attributeName, attributeValue]
 80 | }
 81 | 
 82 | /**
 83 |  * Pretty print transform log for N arguments
 84 |  *
 85 |  * @param {import('jscodeshift').FileInfo} file
 86 |  * @param {...any} message
 87 |  */
 88 | export function log(file, ...message) {
 89 | 	print(file, 'log', message)
 90 | }
 91 | 
 92 | const messages = {}
 93 | 
 94 | function print(file, color, message) {
 95 | 	const fileName = file.path || 'Unknown'
 96 | 	messages[fileName] = messages[fileName] || []
 97 | 	messages[fileName].push({ color, message })
 98 | }
 99 | 
100 | /**
101 |  * Pretty print transform warn for N arguments
102 |  *
103 |  * @param {import('jscodeshift').FileInfo} file
104 |  * @param {...any} message
105 |  */
106 | export function warn(file, ...message) {
107 | 	print(file, 'warn', message)
108 | }
109 | 
110 | function orange(string) {
111 | 	console.log(`\x1b[33m${string}\x1b[0m`)
112 | }
113 | function blue(string) {
114 | 	console.log(`\x1b[94m${string}\x1b[0m`)
115 | }
116 | process.on('exit', () => {
117 | 	for (const fileName in messages) {
118 | 		blue(fileName)
119 | 
120 | 		for (const message of messages[fileName]) {
121 | 			// strings
122 | 			const newMessages = message.message.map(x =>
123 | 				typeof x === 'string'
124 | 					? x === ''
125 | 						? '""'
126 | 						: x === 'true' || x === 'false' || x === '0' || x === '1'
127 | 							? '"' + x + '"'
128 | 							: x
129 | 					: typeof x === 'boolean' || typeof x === 'number'
130 | 						? '´' + x + '´'
131 | 						: x,
132 | 			)
133 | 			const stringMessages = newMessages
134 | 				.filter(x => typeof x === 'string')
135 | 				.join(' ')
136 | 				.replace(/\s+/g, ' ')
137 | 				.trim()
138 | 
139 | 			if (stringMessages) {
140 | 				if (message.color === 'warn') {
141 | 					orange(` - ${stringMessages}`)
142 | 				} else {
143 | 					console.log(' - ' + stringMessages)
144 | 				}
145 | 			}
146 | 
147 | 			// objects
148 | 			newMessages.forEach(
149 | 				x => typeof x !== 'string' && console.log(x),
150 | 			)
151 | 		}
152 | 	}
153 | })
154 | 


--------------------------------------------------------------------------------
/src/bin/solid-codemod.js:
--------------------------------------------------------------------------------
  1 | import path from 'path'
  2 | 
  3 | import {
  4 | 	blue,
  5 | 	copy,
  6 | 	diffFiles,
  7 | 	exists,
  8 | 	getDirectories,
  9 | 	getFiles,
 10 | 	green,
 11 | 	prettier,
 12 | 	read,
 13 | 	red,
 14 | 	root,
 15 | } from '../utils.js'
 16 | import { runTransformer } from './run-transformer.js'
 17 | 
 18 | // program
 19 | 
 20 | blue('SolidJS Codemod')
 21 | 
 22 | process.on('exit', () => console.log())
 23 | 
 24 | // get transformers list
 25 | 
 26 | const transformersDirectory = path.join(root, 'src', 'transforms')
 27 | 
 28 | const transformers =
 29 | 	/** @type string[] */
 30 | 	getDirectories(transformersDirectory)
 31 | 		.map(version =>
 32 | 			getDirectories(path.join(transformersDirectory, version)).map(
 33 | 				// replace because else windows won't match `solid@v2\\transform-name`
 34 | 				x => path.join(version, x).replace(/\\/g, '/'),
 35 | 			),
 36 | 		)
 37 | 		.flat(Infinity)
 38 | 
 39 | // get input
 40 | 
 41 | const input = {
 42 | 	write: false,
 43 | 	/** @type {string[]} */
 44 | 	transformers: [],
 45 | 	/** @type {string[]} */
 46 | 	paths: [],
 47 | }
 48 | 
 49 | // naive but accepts array of transformers and array of paths
 50 | 
 51 | for (const item of process.argv.slice(2)) {
 52 | 	switch (item) {
 53 | 		case '-w':
 54 | 		case '--write': {
 55 | 			input.write = true
 56 | 			break
 57 | 		}
 58 | 		default: {
 59 | 			// replace because else windows won't match `solid@v2\\transform-name`
 60 | 			transformers.includes(item.replace(/\\/g, '/'))
 61 | 				? input.transformers.push(item.replace(/\\/g, '/'))
 62 | 				: input.paths.push(item)
 63 | 			break
 64 | 		}
 65 | 	}
 66 | }
 67 | 
 68 | // run transformers on user files
 69 | 
 70 | if (input.paths.length && input.transformers.length) {
 71 | 	// get files
 72 | 
 73 | 	const files = getFiles(input.paths)
 74 | 
 75 | 	// group by type
 76 | 
 77 | 	const JSFiles = files.filter(x => /\.(jsx|js)$/.test(x))
 78 | 	const TSFiles = files.filter(x => /\.(tsx|ts)$/.test(x))
 79 | 
 80 | 	blue('Running Transforms...\n')
 81 | 
 82 | 	for (const transformer of input.transformers) {
 83 | 		let transformerFile = path.join(
 84 | 			transformersDirectory,
 85 | 			transformer,
 86 | 			'index.js',
 87 | 		)
 88 | 		if (!exists(transformerFile)) {
 89 | 			transformerFile = transformerFile.replace(/\.js$/, '.ts')
 90 | 		}
 91 | 
 92 | 		const promises = []
 93 | 
 94 | 		for (const files of [JSFiles, TSFiles]) {
 95 | 			if (files.length) {
 96 | 				promises.push(
 97 | 					runTransformer(transformerFile, files, input.write),
 98 | 				)
 99 | 			}
100 | 		}
101 | 
102 | 		// await the current trnasform to go to the next one
103 | 		// as these may edit the same files
104 | 		await Promise.all(promises)
105 | 	}
106 | 
107 | 	green('DONE')
108 | 	process.exit()
109 | }
110 | 
111 | // run transformers test files
112 | 
113 | blue('Running Transform Tests..\n')
114 | 
115 | // run on selected transforms, or on all if nothing is selected
116 | // @ts-ignore
117 | input.transformers = input.transformers.length
118 | 	? input.transformers
119 | 	: transformers
120 | 
121 | for (const transformer of input.transformers) {
122 | 	const transformerDirectory = path.join(
123 | 		transformersDirectory,
124 | 		transformer,
125 | 	)
126 | 
127 | 	let transformerFile = path.join(transformerDirectory, 'index.js')
128 | 	if (!exists(transformerFile)) {
129 | 		transformerFile = transformerFile.replace(/\.js$/, '.ts')
130 | 	}
131 | 	const transformerTestDirectory = path.join(
132 | 		transformerDirectory,
133 | 		'test',
134 | 	)
135 | 
136 | 	if (!exists(transformerTestDirectory)) {
137 | 		continue
138 | 	}
139 | 
140 | 	const tests = getFiles(transformerTestDirectory).filter(x =>
141 | 		/input\.(js|jsx|ts|tsx)$/.test(x),
142 | 	)
143 | 
144 | 	for (const inputFile of tests) {
145 | 		const outputFile = inputFile.replace('input.', 'output.')
146 | 		const expectedFile = inputFile.replace('input.', 'expected.')
147 | 
148 | 		prettier(inputFile)
149 | 		prettier(expectedFile)
150 | 
151 | 		const expected = read(expectedFile)
152 | 
153 | 		copy(inputFile, outputFile)
154 | 
155 | 		await runTransformer(transformerFile, [outputFile], true)
156 | 
157 | 		prettier(outputFile)
158 | 
159 | 		const result = read(outputFile)
160 | 
161 | 		if (result !== expected) {
162 | 			red("Test Failed, output doesn't match!")
163 | 
164 | 			blue('    ' + inputFile)
165 | 
166 | 			console.log(
167 | 				diffFiles(
168 | 					{ name: expectedFile, content: expected },
169 | 					{ name: outputFile, content: result },
170 | 				),
171 | 			)
172 | 
173 | 			process.exit(1)
174 | 		} else {
175 | 			green(inputFile)
176 | 		}
177 | 	}
178 | }
179 | 
180 | green('DONE')
181 | 


--------------------------------------------------------------------------------
/src/data/solid@v2/solid-markup.js:
--------------------------------------------------------------------------------
  1 | import solid from './jsx.json' with { type: 'json' }
  2 | 
  3 | // https://github.com/ryansolid/dom-expressions/blob/next/packages/dom-expressions/src/jsx-h.d.ts#L795
  4 | // `global.autofocus` is boolean so we can assume all other booleans have the same type
  5 | const BooleanAttribute = solid.attributes.global.autofocus
  6 | 
  7 | export const SolidMarkupV2 = new (class {
  8 | 	/**
  9 | 	 * Returns `true` when the html/mathml/svg/xml tag is known.
 10 | 	 *
 11 | 	 * @param {string} tagName
 12 | 	 * @returns {boolean}
 13 | 	 */
 14 | 	isKnownTag(tagName) {
 15 | 		return !!solid.tags[tagName] || this.isCustomElement(tagName)
 16 | 	}
 17 | 
 18 | 	/**
 19 | 	 * Returns `true` when is a custom element
 20 | 	 *
 21 | 	 * @param {string} tagName
 22 | 	 * @returns {boolean}
 23 | 	 */
 24 | 	isCustomElement(tagName) {
 25 | 		return tagName.includes('-')
 26 | 	}
 27 | 
 28 | 	/**
 29 | 	 * Returns `true` when the html/mathml/svg/xml attribute is known
 30 | 	 *
 31 | 	 * @param {string} tagName
 32 | 	 * @param {string} attributeName
 33 | 	 * @returns {boolean}
 34 | 	 */
 35 | 	isKnownAttribute(tagName, attributeName) {
 36 | 		return (
 37 | 			// web components use whatever they want
 38 | 			this.isCustomElement(tagName) ||
 39 | 			// data-attributes
 40 | 			this.isDataAttribute(attributeName) ||
 41 | 			// namespaced
 42 | 			this.isNamespacedAttribute(attributeName) ||
 43 | 			// attribute defined in the tag
 44 | 			this.isOwnAttribute(tagName, attributeName) ||
 45 | 			// global attribute
 46 | 			this.isGlobalAttribute(attributeName) ||
 47 | 			// custom attribute
 48 | 			this.isCustomAttribute(attributeName)
 49 | 		)
 50 | 	}
 51 | 
 52 | 	/**
 53 | 	 * Returns `true` when the attribute is defined for the tag
 54 | 	 *
 55 | 	 * @param {string} tagName
 56 | 	 * @param {string} attributeName
 57 | 	 * @returns {boolean}
 58 | 	 */
 59 | 	isOwnAttribute(tagName, attributeName) {
 60 | 		return !!(
 61 | 			solid.tags[tagName] && solid.tags[tagName][attributeName]
 62 | 		)
 63 | 	}
 64 | 
 65 | 	/**
 66 | 	 * Returns `true` when is a global attribute, such `tabindex`
 67 | 	 *
 68 | 	 * @param {string} attributeName
 69 | 	 * @returns {boolean}
 70 | 	 */
 71 | 	isGlobalAttribute(attributeName) {
 72 | 		return !!solid.attributes.global[attributeName]
 73 | 	}
 74 | 
 75 | 	/**
 76 | 	 * Returns `true` when is a `custom` attribute, such `ref`,
 77 | 	 * `children`
 78 | 	 *
 79 | 	 * @param {string} attributeName
 80 | 	 * @returns {boolean}
 81 | 	 */
 82 | 	isCustomAttribute(attributeName) {
 83 | 		return !!solid.attributes.custom[attributeName]
 84 | 	}
 85 | 
 86 | 	/**
 87 | 	 * Returns `true` when is a `data-*` attribute
 88 | 	 *
 89 | 	 * @param {string} attributeName
 90 | 	 * @returns {boolean}
 91 | 	 */
 92 | 	isDataAttribute(attributeName) {
 93 | 		return attributeName.startsWith('data-')
 94 | 	}
 95 | 
 96 | 	/**
 97 | 	 * Returns `true` when is a namespaced attribute
 98 | 	 *
 99 | 	 * @param {string} attributeName
100 | 	 * @returns {boolean}
101 | 	 */
102 | 	isNamespacedAttribute(attributeName) {
103 | 		return (
104 | 			this.isNamespacedEventListenerAttribute(attributeName) ||
105 | 			this.isNamespacedDirectiveAttribute(attributeName) ||
106 | 			this.isNamespacedAttrAttribute(attributeName) ||
107 | 			this.isNamespacedPropAttribute(attributeName) ||
108 | 			this.isNamespacedBoolAttribute(attributeName)
109 | 		)
110 | 	}
111 | 
112 | 	/**
113 | 	 * Returns `true` when is an event listener
114 | 	 *
115 | 	 * @param {string} attributeName
116 | 	 * @returns {boolean}
117 | 	 */
118 | 	isEventListenerAttribute(attributeName) {
119 | 		return (
120 | 			this.isLowerCaseEventListenerAttribute(attributeName) ||
121 | 			this.isCamelCaseEventListenerAttribute(attributeName) ||
122 | 			this.isNamespacedEventListenerAttribute(attributeName)
123 | 		)
124 | 	}
125 | 	/**
126 | 	 * Returns `true` when is a lowercase event listener
127 | 	 *
128 | 	 * @param {string} attributeName
129 | 	 * @returns {boolean}
130 | 	 */
131 | 	isLowerCaseEventListenerAttribute(attributeName) {
132 | 		return /^on[a-z]/.test(attributeName)
133 | 	}
134 | 	/**
135 | 	 * Returns `true` when is a camcelCase event listener
136 | 	 *
137 | 	 * @param {string} attributeName
138 | 	 * @returns {boolean}
139 | 	 */
140 | 	isCamelCaseEventListenerAttribute(attributeName) {
141 | 		return /^on[A-Z]/.test(attributeName)
142 | 	}
143 | 	/**
144 | 	 * Returns `true` when is a namespaced `on:`
145 | 	 *
146 | 	 * @param {string} attributeName
147 | 	 * @returns {boolean}
148 | 	 */
149 | 	isNamespacedEventListenerAttribute(attributeName) {
150 | 		return attributeName.startsWith('on:')
151 | 	}
152 | 	/**
153 | 	 * Returns `true` when is a namespaced `use:`
154 | 	 *
155 | 	 * @param {string} attributeName
156 | 	 * @returns {boolean}
157 | 	 */
158 | 	isNamespacedDirectiveAttribute(attributeName) {
159 | 		return attributeName.startsWith('use:')
160 | 	}
161 | 	/**
162 | 	 * Returns `true` when is a namespaced `attr:`
163 | 	 *
164 | 	 * @param {string} attributeName
165 | 	 * @returns {boolean}
166 | 	 */
167 | 	isNamespacedAttrAttribute(attributeName) {
168 | 		return attributeName.startsWith('attr:')
169 | 	}
170 | 	/**
171 | 	 * Returns `true` when is a namespaced `prop:`
172 | 	 *
173 | 	 * @param {string} attributeName
174 | 	 * @returns {boolean}
175 | 	 */
176 | 	isNamespacedPropAttribute(attributeName) {
177 | 		return attributeName.startsWith('prop:')
178 | 	}
179 | 	/**
180 | 	 * Returns `true` when is a namespaced `bool:`
181 | 	 *
182 | 	 * @param {string} attributeName
183 | 	 * @returns {boolean}
184 | 	 */
185 | 	isNamespacedBoolAttribute(attributeName) {
186 | 		return attributeName.startsWith('bool:')
187 | 	}
188 | 
189 | 	/**
190 | 	 * Returns `true` when is a Solid JSX BooleanAttribute
191 | 	 *
192 | 	 * @param {string} tagName
193 | 	 * @param {string} attributeName
194 | 	 * @returns {boolean}
195 | 	 */
196 | 	isBooleanAttribute(tagName, attributeName) {
197 | 		const attributeType = this.getAttributeJSXType(
198 | 			tagName,
199 | 			attributeName,
200 | 		)
201 | 
202 | 		return (
203 | 			this.isKnownAttribute(tagName, attributeName) &&
204 | 			attributeType === BooleanAttribute
205 | 		)
206 | 	}
207 | 
208 | 	/**
209 | 	 * Returns `true` when is a Solid JSX EnumeratedPseudoBoolean
210 | 	 *
211 | 	 * @param {string} tagName
212 | 	 * @param {string} attributeName
213 | 	 * @returns {boolean}
214 | 	 */
215 | 	isEnumeratedPseudoBooleanAttribute(tagName, attributeName) {
216 | 		const attributeType = this.getAttributeJSXType(
217 | 			tagName,
218 | 			attributeName,
219 | 		)
220 | 
221 | 		return !!(
222 | 			this.isKnownAttribute(tagName, attributeName) &&
223 | 			attributeType &&
224 | 			attributeType.includes("'true'") &&
225 | 			attributeType.includes("'false'")
226 | 		)
227 | 	}
228 | 
229 | 	/**
230 | 	 * Returns `string` with Solid JSX Type for Attribute
231 | 	 *
232 | 	 * @param {string} tagName
233 | 	 * @param {string} attributeName
234 | 	 * @returns {string}
235 | 	 */
236 | 
237 | 	getAttributeJSXType(tagName, attributeName) {
238 | 		return solid.tags[tagName] && solid.tags[tagName][attributeName]
239 | 			? solid.tags[tagName][attributeName]
240 | 			: solid.attributes.global[attributeName]
241 | 	}
242 | })()
243 | 


--------------------------------------------------------------------------------
/src/transforms/solid@v2/jsx-properties-to-attributes/index.js:
--------------------------------------------------------------------------------
  1 | import { SolidMarkupV2 } from '../../../data/solid@v2/solid-markup.js'
  2 | 
  3 | import {
  4 | 	log,
  5 | 	getAttributeNameAndValueFromJSXAttribute,
  6 | 	getTagNameFromJSXElement,
  7 | 	warn,
  8 | } from '../../shared.js'
  9 | 
 10 | /**
 11 |  * This transform provides the following when reliable possible:
 12 |  *
 13 |  * - CamelCase attributes to lowercase on known tags (not in components)
 14 |  * - Unwrap `attr:` for known attributes
 15 |  * - `onsubmit="return false"` -> `attr:onsubmit="return false"`
 16 |  * - Ensure `boolean` attributes values (for static/conditional values)
 17 |  * - Ensure `pseudo-boolean` attributes values (for static/conditional
 18 |  *   values)
 19 |  * - Warn of unknown attributes
 20 |  *
 21 |  * @param {import('jscodeshift').FileInfo} file
 22 |  * @param {import('jscodeshift').API} api
 23 |  */
 24 | export default function transformer(file, api) {
 25 | 	const j = api.jscodeshift
 26 | 	const root = j(file.source)
 27 | 
 28 | 	root.find(j.JSXElement).forEach(path => {
 29 | 		const tagName = getTagNameFromJSXElement(api, path)
 30 | 
 31 | 		if (!SolidMarkupV2.isKnownTag(tagName)) {
 32 | 			// skip JSX Components and unknown tags
 33 | 			return
 34 | 		}
 35 | 
 36 | 		const attributes = path.node.openingElement.attributes
 37 | 
 38 | 		attributes.slice().forEach(attr => {
 39 | 			if (attr.type === 'JSXAttribute') {
 40 | 				// get name and value
 41 | 				let [attributeName, attributeValue] =
 42 | 					getAttributeNameAndValueFromJSXAttribute(api, attr)
 43 | 
 44 | 				let isKnownAttribute = SolidMarkupV2.isKnownAttribute(
 45 | 					tagName,
 46 | 					attributeName,
 47 | 				)
 48 | 
 49 | 				// camelCase to lowercase transform: tabIndex` -> `tabindex`
 50 | 				if (!isKnownAttribute) {
 51 | 					const newName = attributeName.toLowerCase()
 52 | 
 53 | 					if (SolidMarkupV2.isKnownAttribute(tagName, newName)) {
 54 | 						log(
 55 | 							file,
 56 | 							`renamed attribute ´${attributeName}´ to ´${newName}´ on tag ´${tagName}´`,
 57 | 						)
 58 | 						isKnownAttribute = true
 59 | 						attributeName = newName
 60 | 						attr.name = j.jsxIdentifier(newName)
 61 | 					}
 62 | 				}
 63 | 
 64 | 				// unwrap `attr:tabIndex` -> `tabindex`
 65 | 				if (SolidMarkupV2.isNamespacedAttrAttribute(attributeName)) {
 66 | 					const newName = attributeName
 67 | 						.replace(/^attr:/, '')
 68 | 						.toLowerCase()
 69 | 
 70 | 					if (SolidMarkupV2.isKnownAttribute(tagName, newName)) {
 71 | 						log(
 72 | 							file,
 73 | 							`renamed attribute ´${attributeName}´ to ´${newName}´ on tag ´${tagName}´`,
 74 | 						)
 75 | 						isKnownAttribute = true
 76 | 						attributeName = newName
 77 | 						attr.name = j.jsxIdentifier(newName)
 78 | 					}
 79 | 				}
 80 | 
 81 | 				// `onsubmit="return false"` -> `attr:onsubmit="return false"`
 82 | 				if (
 83 | 					SolidMarkupV2.isLowerCaseEventListenerAttribute(
 84 | 						attributeName,
 85 | 					)
 86 | 				) {
 87 | 					if (attributeValue) {
 88 | 						if (attributeValue.type === 'StringLiteral') {
 89 | 							const newName = `attr:${attributeName}`
 90 | 							log(
 91 | 								file,
 92 | 								`renamed attribute ´${attributeName}´ to ´${newName}´ on tag ´${tagName}´`,
 93 | 							)
 94 | 							isKnownAttribute = true
 95 | 							attributeName = newName
 96 | 							attr.name = j.jsxIdentifier(newName)
 97 | 						}
 98 | 					}
 99 | 				}
100 | 
101 | 				// skips
102 | 				if (
103 | 					SolidMarkupV2.isDataAttribute(attributeName) ||
104 | 					SolidMarkupV2.isNamespacedAttribute(attributeName) ||
105 | 					SolidMarkupV2.isEventListenerAttribute(attributeName)
106 | 				) {
107 | 					return
108 | 				}
109 | 
110 | 				// by value change
111 | 
112 | 				if (
113 | 					isKnownAttribute &&
114 | 					SolidMarkupV2.isBooleanAttribute(tagName, attributeName)
115 | 				) {
116 | 					//  BOOLEANS !
117 | 
118 | 					function getNewValue(value) {
119 | 						// <div autofocus/>
120 | 						// <div autofocus={true/false}/>
121 | 						if (value === null || value.type === 'BooleanLiteral') {
122 | 							return
123 | 						}
124 | 
125 | 						// <div autofocus={undefined}/>
126 | 						if (
127 | 							value.type === 'Identifier' &&
128 | 							value.name === 'undefined'
129 | 						) {
130 | 							return
131 | 						}
132 | 
133 | 						// <div autofocus=""/>
134 | 						// <div autofocus="true"/>
135 | 						// <div autofocus="false"/>
136 | 						// <div autofocus="anything"/>
137 | 						if (value.type === 'StringLiteral') {
138 | 							return j.booleanLiteral(
139 | 								value.value === 'false' ? false : true,
140 | 							)
141 | 						}
142 | 
143 | 						// <div autofocus={0}/>
144 | 						// <div autofocus={1}/>
145 | 						// <div autofocus={69}/>
146 | 						if (value.type === 'NumericLiteral') {
147 | 							return j.booleanLiteral(value.value <= 0 ? false : true)
148 | 						}
149 | 					}
150 | 
151 | 					const newValue = getNewValue(attributeValue)
152 | 
153 | 					if (newValue) {
154 | 						log(
155 | 							file,
156 | 							`changed value for ´boolean´ attribute ´${attributeName}´
157 | 							on tag ´${tagName}´ from`,
158 | 							!attributeValue ? true : attributeValue.value,
159 | 							'to',
160 | 							newValue.value,
161 | 						)
162 | 						attr.value = j.jsxExpressionContainer(newValue)
163 | 						return
164 | 					}
165 | 
166 | 					function updateCondition(value, expressionKey) {
167 | 						let newValue = getNewValue(value[expressionKey])
168 | 						if (newValue) {
169 | 							log(
170 | 								file,
171 | 								`changed condition value for ´boolean´ attribute ´${attributeName}´
172 | 								on tag ´${tagName}´ from`,
173 | 								value[expressionKey].value,
174 | 								'to',
175 | 								newValue.value,
176 | 							)
177 | 							value[expressionKey] = newValue
178 | 						}
179 | 					}
180 | 
181 | 					// <div autofocus={state?.admin ? "true" : "false"}/>
182 | 					if (
183 | 						attributeValue &&
184 | 						attributeValue.type === 'ConditionalExpression'
185 | 					) {
186 | 						updateCondition(attributeValue, 'consequent')
187 | 						updateCondition(attributeValue, 'alternate')
188 | 
189 | 						return
190 | 					}
191 | 
192 | 					// <div autofocus={state?.admin || "false" }/>
193 | 					if (
194 | 						attributeValue &&
195 | 						attributeValue.type === 'LogicalExpression'
196 | 					) {
197 | 						updateCondition(attributeValue, 'left')
198 | 						updateCondition(attributeValue, 'right')
199 | 
200 | 						return
201 | 					}
202 | 
203 | 					if (
204 | 						attributeValue &&
205 | 						attributeValue.type !== 'BooleanLiteral' &&
206 | 						attributeValue.type !== 'MemberExpression' &&
207 | 						attributeValue.type !== 'CallExpression' &&
208 | 						// attributeValue.type !== 'LogicalExpression' &&
209 | 						attributeValue.type !== 'ArrowFunctionExpression' &&
210 | 						attributeValue.type !== 'FunctionExpression' &&
211 | 						attributeValue.type !== 'Identifier' &&
212 | 						attributeValue.type !== 'NullLiteral' &&
213 | 						attributeValue.type !== 'UnaryExpression'
214 | 					) {
215 | 						warn(file, attributeName, attributeValue)
216 | 					}
217 | 					return
218 | 				}
219 | 
220 | 				if (
221 | 					isKnownAttribute &&
222 | 					SolidMarkupV2.isEnumeratedPseudoBooleanAttribute(
223 | 						tagName,
224 | 						attributeName,
225 | 					)
226 | 				) {
227 | 					// PSEUDO BOOLEANS !
228 | 
229 | 					function getNewValue(value) {
230 | 						// <div spellcheck/>
231 | 						if (!value) {
232 | 							return j.stringLiteral('true')
233 | 						}
234 | 
235 | 						// <div spellcheck={undefined}/>
236 | 						if (
237 | 							value.type === 'Identifier' &&
238 | 							value.name === 'undefined'
239 | 						) {
240 | 							return
241 | 						}
242 | 
243 | 						// <div spellcheck="true"/>
244 | 						// <div spellcheck="false"/>
245 | 						// <div spellcheck="anything"/>
246 | 						if (value.type === 'StringLiteral') {
247 | 							return
248 | 						}
249 | 
250 | 						// <div spellcheck={true}/>
251 | 						// <div spellcheck={false}/>
252 | 						if (value.type === 'BooleanLiteral') {
253 | 							return j.stringLiteral(
254 | 								value.value === true ? 'true' : 'false',
255 | 							)
256 | 						}
257 | 					}
258 | 
259 | 					const newValue = getNewValue(attributeValue)
260 | 
261 | 					if (newValue) {
262 | 						log(
263 | 							file,
264 | 							`changed value for ´pseudo-boolean´ attribute ´${attributeName}´
265 | 								on tag ´${tagName}´ from`,
266 | 							!attributeValue ? true : attributeValue.value,
267 | 							'to',
268 | 							newValue.value,
269 | 						)
270 | 						attr.value = j.jsxExpressionContainer(newValue)
271 | 						return
272 | 					}
273 | 
274 | 					function updateCondition(value, expressionKey) {
275 | 						let newValue = getNewValue(value[expressionKey])
276 | 						if (newValue) {
277 | 							log(
278 | 								file,
279 | 								`changed condition value for ´pseudo-boolean´ attribute ´${attributeName}´
280 | 								on tag ´${tagName}´ from`,
281 | 								value[expressionKey].value,
282 | 								'to',
283 | 								newValue.value,
284 | 							)
285 | 							value[expressionKey] = newValue
286 | 						}
287 | 					}
288 | 
289 | 					// <div spellcheck={state?.admin ? bla : bla}/>
290 | 					if (
291 | 						attributeValue &&
292 | 						attributeValue.type === 'ConditionalExpression'
293 | 					) {
294 | 						updateCondition(attributeValue, 'consequent')
295 | 						updateCondition(attributeValue, 'alternate')
296 | 
297 | 						return
298 | 					}
299 | 
300 | 					// <div spellcheck={state?.admin || bla }/>
301 | 					if (
302 | 						attributeValue &&
303 | 						attributeValue.type === 'LogicalExpression'
304 | 					) {
305 | 						updateCondition(attributeValue, 'left')
306 | 						updateCondition(attributeValue, 'right')
307 | 
308 | 						return
309 | 					}
310 | 
311 | 					if (
312 | 						attributeValue &&
313 | 						attributeValue.type !== 'BinaryExpression' &&
314 | 						attributeValue.type !== 'NumericLiteral' &&
315 | 						attributeValue.type !== 'StringLiteral' &&
316 | 						attributeValue.type !== 'MemberExpression' &&
317 | 						attributeValue.type !== 'CallExpression' &&
318 | 						// attributeValue.type !== 'LogicalExpression' &&
319 | 						attributeValue.type !== 'ArrowFunctionExpression' &&
320 | 						attributeValue.type !== 'FunctionExpression' &&
321 | 						attributeValue.type !== 'Identifier' &&
322 | 						attributeValue.type !== 'NullLiteral' &&
323 | 						attributeValue.type !== 'UnaryExpression'
324 | 					) {
325 | 						warn(file, attributeName, attributeValue)
326 | 					}
327 | 				}
328 | 
329 | 				if (
330 | 					!isKnownAttribute &&
331 | 					!SolidMarkupV2.isCustomElement(tagName)
332 | 				) {
333 | 					warn(
334 | 						file,
335 | 						`unknown attribute ´${attributeName}´ on tag ´${tagName}´`,
336 | 					)
337 | 				}
338 | 			}
339 | 		})
340 | 	})
341 | 
342 | 	return root.toSource()
343 | }
344 | 


--------------------------------------------------------------------------------