docs(changeset): use better parser for typescript/jsx in directives

.changeset/orange-fireants-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@vinxi/plugin-directives": patch
+---
+
+use better parser for typescript/jsx in directives

packages/vinxi-directives/babel.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parse = exports.parser = void 0;
+var tslib_1 = require("tslib");
+var _babel_options_1 = tslib_1.__importDefault(require("recast/parsers/_babel_options"));
+// Prefer the new @babel/parser package, but fall back to babylon if
+// that's what's available.
+exports.parser = (function () {
+ try {
+ return require("@babel/parser");
+ } catch (_a) {
+ try {
+ return require("babylon");
+ } catch (_b) {
+ throw new Error(
+ "Install @babel/parser to use the `typescript`, `flow`, or `babel` parsers",
+ );
+ }
+ }
+})();
+// This module is suitable for passing as options.parser when calling
+// recast.parse to process JavaScript code with Babel:
+//
+// const ast = recast.parse(source, {
+// parser: require("recast/parsers/babel")
+// });
+//
+function parse(source, options) {
+ var babelOptions = (0, _babel_options_1.default)(options);
+ babelOptions.plugins.push("jsx", "decoratorAutoAccessors", "typescript");
+ return exports.parser.parse(source, babelOptions);
+}
+exports.parse = parse;

packages/vinxi-directives/fixtures/example-1.snapshot.ts

@@ -0,0 +1,48 @@
+import { createReference } from "~/runtime";
+import { isServer } from "solid-js/web";
+
+const story = (path) => `https://node-hnapi.herokuapp.com/${path}`;
+const user = (path) => `https://hacker-news.firebaseio.com/v0/${path}.json`;
+
+export default createReference(
+ async function fetchAPI(path: string) {
+ const url = path.startsWith("user") ? user(path) : story(path);
+
+ const headers: Record<string, string> = isServer
+ ? {
+ "User-Agent": "chrome",
+ }
+ : {};
+
+ try {
+ let response = await fetch(url, {
+ headers,
+ });
+
+ let text = await response.text();
+
+ try {
+ if (text === null) {
+ return {
+ error: "Not found",
+ };
+ }
+
+ return JSON.parse(text);
+ } catch (e) {
+ console.error(`Received from API: ${text}`);
+ console.error(e);
+
+ return {
+ error: e,
+ };
+ }
+ } catch (error) {
+ return {
+ error,
+ };
+ }
+ },
+ "test",
+ "default",
+);

packages/vinxi-directives/fixtures/example-1.ts

@@ -0,0 +1,45 @@
+"use runtime";
+
+import { isServer } from "solid-js/web";
+
+const story = (path) => `https://node-hnapi.herokuapp.com/${path}`;
+const user = (path) => `https://hacker-news.firebaseio.com/v0/${path}.json`;
+
+export default async function fetchAPI(path: string) {
+ const url = path.startsWith("user") ? user(path) : story(path);
+
+ const headers: Record<string, string> = isServer
+ ? {
+ "User-Agent": "chrome",
+ }
+ : {};
+
+ try {
+ let response = await fetch(url, {
+ headers,
+ });
+
+ let text = await response.text();
+
+ try {
+ if (text === null) {
+ return {
+ error: "Not found",
+ };
+ }
+
+ return JSON.parse(text);
+ } catch (e) {
+ console.error(`Received from API: ${text}`);
+ console.error(e);
+
+ return {
+ error: e,
+ };
+ }
+ } catch (error) {
+ return {
+ error,
+ };
+ }
+}

packages/vinxi-directives/fixtures/shim-exports-fn.snapshot.ts

@@ -2,14 +2,20 @@ import { createReference } from "~/runtime";
 import db from "~/server/db";
 
 export const fn2 = () => {};
+const user = (path: string) =>
+ `https://hacker-news.firebaseio.com/v0/${path}.json`;
 export const fn3 = createReference($$function0, "test", "$$function0");
 export const fn31 = createReference($$function1, "test", "$$function1");
 export const f1 = createReference($$function2, "test", "$$function2");
 
 function Component() {
  const fn = createReference($$function3, "test", "$$function3");
  const x = createReference($$function4, "test", "$$function4");
- return <div onClick={createReference($$function5, "test", "$$function5")} />;
+ return (
+ <div 
+ onClick={createReference($$function5, "test", "$$function5")} 
+ />
+ );
 }
 
 export const f2 = createReference($$function6, "test", "$$function6");
@@ -56,4 +62,4 @@ export function $$function11(param) {}
 
 export function $$function12(input, options) {}
 
-export function $$function13(input, options) {}
+export function $$function13(input: string, options) {}

packages/vinxi-directives/fixtures/shim-exports-fn.ts

@@ -1,6 +1,8 @@
 import db from "~/server/db";
 
 export const fn2 = () => {};
+const user = (path: string) =>
+ `https://hacker-news.firebaseio.com/v0/${path}.json`;
 export const fn3 = (param) => {
  "use runtime";
  console.log("hello", db.get(param));
@@ -73,7 +75,7 @@ const f3 = (input, options) => {
  f4 = function (input, options) {};
 export { f3, f4 };
 
-function if6(input, options) {
+function if6(input: string, options) {
  "use runtime";
  console.log("hello");
 }

packages/vinxi-directives/fixtures/wrap-exports-fn.snapshot.ts

@@ -2,14 +2,16 @@ import { createReference } from "~/runtime";
 import db from "~/server/db";
 
 export const fn2 = () => {};
+const user = (path: string) =>
+ `https://hacker-news.firebaseio.com/v0/${path}.json`;
 export const fn3 = createReference($$function0, "test", "$$function0");
 export const fn31 = createReference($$function1, "test", "$$function1");
 export const f1 = createReference($$function2, "test", "$$function2");
 
 function Component() {
  const fn = createReference($$function3, "test", "$$function3");
  const x = createReference($$function4, "test", "$$function4");
- return <div onClick={createReference($$function5, "test", "$$function5")} />;
+ return (<div onClick={createReference($$function5, "test", "$$function5")} />);
 }
 
 export const f2 = createReference($$function6, "test", "$$function6");

packages/vinxi-directives/fixtures/wrap-exports-fn.ts

@@ -1,6 +1,8 @@
 import db from "~/server/db";
 
 export const fn2 = () => {};
+const user = (path: string) =>
+ `https://hacker-news.firebaseio.com/v0/${path}.json`;
 export const fn3 = (param) => {
  "use runtime";
  console.log("hello", db.get(param));

packages/vinxi-directives/package.json

@@ -34,6 +34,7 @@
  "acorn-typescript": "^1.4.3",
  "astring": "^1.8.6",
  "magicast": "^0.2.10",
- "recast": "^0.23.4"
+ "recast": "^0.23.4",
+ "tslib": "^2.6.2"
  }
 }

packages/vinxi-directives/parse.js

@@ -17,37 +17,41 @@ export function parseLoose(code) {
  });
 }
 export function parseAdvanced(code) {
- return recastParse(code, {
- parser: {
- parse(source) {
- var comments = [];
- var tokens = [];
+ return recastParse(
+ code,
+ { parser: require("./babel.cjs") },
+ // , {
+ // parser: {
+ // parse(source) {
+ // var comments = [];
+ // var tokens = [];
 
- /** @type {AST} */
- let ast;
+ //  /** @type {AST} */
+ //  let ast;
 
- // @ts-ignore
- ast = parser.parse(source, {
- allowHashBang: true,
- allowImportExportEverywhere: true,
- allowReturnOutsideFunction: true,
- locations: true,
- onComment: comments,
- onToken: tokens,
- // additional options
- ecmaVersion: 2024,
- sourceType: "module",
- });
+ //  // @ts-ignore
+ //  ast = parser.parse(source, {
+ //  allowHashBang: true,
+ //  allowImportExportEverywhere: true,
+ //  allowReturnOutsideFunction: true,
+ //  locations: true,
+ //  onComment: comments,
+ //  onToken: tokens,
+ //  // additional options
+ //  ecmaVersion: 2024,
+ //  sourceType: "module",
+ //  });
 
- if (!ast.comments) {
- ast.comments = comments;
- }
+ //  if (!ast.comments) {
+ //  ast.comments = comments;
+ //  }
 
- if (!ast.tokens) {
- ast.tokens = tokens;
- }
- return ast;
- },
- },
- });
+ // if (!ast.tokens) {
+ // ast.tokens = tokens;
+ // }
+ // return ast;
+ // },
+ // },
+ // }
+ );
 }