mini repl for svelte2tsx

.vscode/launch.json

@@ -12,6 +12,19 @@
             "outFiles": ["${workspaceRoot}/packkages/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",

packages/svelte2tsx/.gitignore

@@ -5,3 +5,4 @@ node_modules
 /index.mjs
 test/typecheck/samples/**/input.svelte.tsx
 test/build
+repl/output

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.28.0",

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.
+ */

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

packages/svelte2tsx/src/htmlxtojsx/index.ts

@@ -1,12 +1,11 @@
 import { Node } from 'estree-walker';
 import MagicString from 'magic-string';
-import svelte from 'svelte/compiler';
+import * as svelte from 'svelte/compiler';
 import { parseHtmlx } from '../utils/htmlxparser';
 import { handleActionDirective } from './nodes/action-directive';
 import { handleAnimateDirective } from './nodes/animation-directive';
 import { handleAttribute } from './nodes/attribute';
 import { handleAwait } from './nodes/await';
-import { handleKey } from './nodes/key';
 import { handleBinding } from './nodes/binding';
 import { handleClassDirective } from './nodes/class-directive';
 import { handleComment } from './nodes/comment';
@@ -16,6 +15,7 @@ import { handleEach } from './nodes/each';
 import { handleElement } from './nodes/element';
 import { handleEventHandler } from './nodes/event-handler';
 import { handleElse, handleIf } from './nodes/if-else';
+import { handleKey } from './nodes/key';
 import { handleRawHtml } from './nodes/raw-html';
 import { handleSvelteTag } from './nodes/svelte-tag';
 import { handleTransitionDirective } from './nodes/transition-directive';

packages/svelte2tsx/src/utils/htmlxparser.ts

@@ -1,5 +1,5 @@
-import compiler from 'svelte/compiler';
 import { Node } from 'estree-walker';
+import * as compiler from 'svelte/compiler';
 
 function parseAttributeValue(value: string): string {
     return /^['"]/.test(value) ? value.slice(1, -1) : value;

packages/svelte2tsx/tsconfig.json

@@ -23,5 +23,5 @@
         "@/*": ["src/*"]
     },
     // "include" is set in rollup.config(.test).js
-    "exclude": ["node_modules"]
+    "exclude": ["node_modules", "repl"]
 }