diff --git a/.vscode/launch.json b/.vscode/launch.json index afb0d55fd..6dc886f5e 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -12,6 +12,19 @@ "outFiles": ["${workspaceRoot}/packages/svelte-vscode/dist/**/*.js"], "preLaunchTask": "npm: watch" }, + { + "type": "node", + "request": "launch", + "name": "Run 'svelte2tsx/repl/debug.ts' with debugger", + "runtimeArgs": ["-r", "ts-node/register"], + "args": ["${workspaceFolder}/packages/svelte2tsx/repl/debug.ts"], + "env": { + "TS_NODE_COMPILER_OPTIONS": "{\"esModuleInterop\":true, \"target\": \"es2018\"}", + "TS_NODE_TRANSPILE_ONLY": "true" + }, + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen" + }, { "type": "node", "request": "launch", diff --git a/packages/svelte2tsx/.gitignore b/packages/svelte2tsx/.gitignore index d4cd79f1f..6d23a7b94 100644 --- a/packages/svelte2tsx/.gitignore +++ b/packages/svelte2tsx/.gitignore @@ -5,3 +5,4 @@ node_modules /index.mjs test/typecheck/samples/**/input.svelte.tsx test/build +repl/output \ No newline at end of file diff --git a/packages/svelte2tsx/package.json b/packages/svelte2tsx/package.json index c1cf66794..827a18f7d 100644 --- a/packages/svelte2tsx/package.json +++ b/packages/svelte2tsx/package.json @@ -17,6 +17,10 @@ "main": "index.js", "types": "index.d.ts", "devDependencies": { + "@rollup/plugin-commonjs": "^15.0.0", + "@rollup/plugin-json": "^4.0.0", + "@rollup/plugin-node-resolve": "^9.0.0", + "@rollup/plugin-typescript": "^6.0.0", "@types/mocha": "^5.2.7", "@types/node": "^8.10.53", "@types/unist": "^2.0.3", @@ -25,11 +29,7 @@ "mocha": "^6.2.2", "periscopic": "^2.0.2", "rollup": "^2.28.0", - "@rollup/plugin-commonjs": "^15.0.0", "rollup-plugin-delete": "^2.0.0", - "@rollup/plugin-json": "^4.0.0", - "@rollup/plugin-node-resolve": "^9.0.0", - "@rollup/plugin-typescript": "^6.0.0", "source-map": "^0.6.1", "source-map-support": "^0.5.16", "svelte": "~3.35.0", diff --git a/packages/svelte2tsx/repl/debug.ts b/packages/svelte2tsx/repl/debug.ts new file mode 100644 index 000000000..724f0413e --- /dev/null +++ b/packages/svelte2tsx/repl/debug.ts @@ -0,0 +1,13 @@ +import fs from 'fs'; +import svelte2tsx from '../src'; +const content = fs.readFileSync(`${__dirname}/index.svelte`, 'utf-8'); +svelte2tsx(content); +/** + * To enable the REPL, simply run the "dev" package script. + * + * The "/repl/index.svelte" file will be converted to tsx + * at "/repl/output/" using the modified source code on change. + * + * Alternatively you may run this file with a debugger attached, + * to do so, hit "Ctrl+Shift+D" and select "svelte2tsx" in the dropdown. + */ diff --git a/packages/svelte2tsx/repl/index.svelte b/packages/svelte2tsx/repl/index.svelte new file mode 100644 index 000000000..e69de29bb diff --git a/packages/svelte2tsx/rollup.config.js b/packages/svelte2tsx/rollup.config.js index b05719aaa..4a388ee79 100644 --- a/packages/svelte2tsx/rollup.config.js +++ b/packages/svelte2tsx/rollup.config.js @@ -1,9 +1,33 @@ -import typescript from '@rollup/plugin-typescript'; import commonjs from '@rollup/plugin-commonjs'; -import resolve from '@rollup/plugin-node-resolve'; import json from '@rollup/plugin-json'; +import resolve from '@rollup/plugin-node-resolve'; +import typescript from '@rollup/plugin-typescript'; import builtins from 'builtin-modules'; +import fs from 'fs'; +import path from 'path'; + +function repl() { + return { + name: 'dev-repl', + buildStart() { + this.addWatchFile('./repl/index.svelte'); + }, + writeBundle() { + if (!this.meta.watchMode) return; + + const repl = `${__dirname}/repl/`; + const output = `${__dirname}/repl/output/`; + + delete require.cache[path.resolve(__dirname, 'index.js')]; + const svelte2tsx = require('./index.js'); + + const tsx = svelte2tsx(fs.readFileSync(`${repl}/index.svelte`, 'utf-8')); + if (!fs.existsSync(output)) fs.mkdirSync(output); + fs.writeFileSync(`${repl}/output/code.tsx`, tsx.code); + } + }; +} export default [ { input: 'src/index.ts', @@ -22,7 +46,8 @@ export default [ resolve({ browser: false, preferBuiltins: true }), commonjs(), json(), - typescript({ include: ['src/**/*'] }) + typescript({ include: ['src/**/*'] }), + repl() ], watch: { clearScreen: false diff --git a/packages/svelte2tsx/src/htmlxtojsx/index.ts b/packages/svelte2tsx/src/htmlxtojsx/index.ts index 20b5c25ff..10a8433d3 100644 --- a/packages/svelte2tsx/src/htmlxtojsx/index.ts +++ b/packages/svelte2tsx/src/htmlxtojsx/index.ts @@ -55,7 +55,7 @@ export function convertHtmlxToJsx( let ifScope = new IfScope(templateScopeManager); - (walk as any)(ast, { + walk(ast, { enter: (node: Node, parent: Node, prop: string, index: number) => { try { switch (node.type) { diff --git a/packages/svelte2tsx/tsconfig.json b/packages/svelte2tsx/tsconfig.json index 77decf9dc..c0cf75bcd 100644 --- a/packages/svelte2tsx/tsconfig.json +++ b/packages/svelte2tsx/tsconfig.json @@ -23,5 +23,5 @@ "@/*": ["src/*"] }, // "include" is set in rollup.config(.test).js - "exclude": ["node_modules"] + "exclude": ["node_modules", "repl"] }