@backtickjs/prettier-plugin 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jean-François Bisson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,63 @@
-# Temporary Holding Version
+# @backtickjs/prettier-plugin
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A [Prettier](https://prettier.io) plugin that formats the code inside [Backtick](https://backtickjs.com) client scripts. Without it, Prettier leaves a `` cs`…` `` script as an opaque template string; with it, the script is formatted as TypeScript or JavaScript, like the rest of the file, with its splices kept in place.
+
+## Install
+
+```sh
+npm install --save-dev prettier typescript @backtickjs/prettier-plugin
+```
+
+Prettier 3 and TypeScript `^6.0.3` are peer dependencies: the plugin uses your project's TypeScript to find scripts. Install it in the package that runs Prettier, which resolves plugins from there.
+
+## Setup
+
+Name the plugin in `.prettierrc`:
+
+```json
+{
+  "plugins": ["@backtickjs/prettier-plugin"]
+}
+```
+
+Projects made with `create-backtick-app` already include this file. In VS Code, the [Prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) reads the same config, so format-on-save formats scripts too.
+
+The plugin applies to `.ts`, `.tsx`, `.js` and `.jsx` files. Other embedded templates, such as CSS or GraphQL, are formatted by Prettier as usual.
+
+## Example
+
+Before:
+
+```tsx
+const name = "Ada";
+const sum = cs`() => {const   a=1;return    a+${name.length}}`;
+export const Greeting = cs`<$View style={{ padding: 24 }}><$Text>Hi {${name}}</$Text><$Text>A second line long enough to break</$Text></$View>`;
+```
+
+After:
+
+```tsx
+const name = "Ada";
+const sum = cs`() => {
+  const a = 1;
+  return a + ${name.length};
+}`;
+export const Greeting = cs`(
+  <$View style={{ padding: 24 }}>
+    <$Text>Hi {$name}</$Text>
+    <$Text>A second line long enough to break</$Text>
+  </$View>
+)`;
+```
+
+A splice of a bare identifier in code prints in its short form (`${name}` becomes `$name`); any other splice keeps its braces and is formatted as host code. A script that is a single JSX element gets parentheses only when it breaks across lines, and a trailing semicolon after a script's final expression is dropped. Formatting is idempotent.
+
+## Related
+
+- [`@backtickjs/core`](https://github.com/backtickjs/backtick/tree/main/packages/core): the `cs` tag
+- [Backtick for VS Code](https://marketplace.visualstudio.com/items?itemName=backtickjs.backtick-vscode): highlighting and type-checking inside scripts
+- [Documentation](https://backtickjs.com/docs)
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import { type Printer } from "prettier";
+export declare const printers: Record<string, Printer>;
+declare const _default: {
+    printers: Record<string, Printer<any>>;
+};
+export default _default;

package/dist/index.js

@@ -0,0 +1,137 @@
+import { flattenScripts, parseSourceText, } from "@backtickjs/compiler";
+import { doc as prettierDoc, } from "prettier";
+import { printers as builtinPrinters } from "prettier/plugins/estree";
+import ts from "typescript";
+const estree = builtinPrinters.estree;
+const { mapDoc } = prettierDoc.utils;
+const { group, ifBreak, indent, softline } = prettierDoc.builders;
+const embed = (path, options) => {
+    const node = path.node;
+    if (node?.type === "TaggedTemplateExpression") {
+        const script = scriptsByStart(options).get(startOf(node));
+        if (script) {
+            const fileName = filepathOf(options) ?? "input.tsx";
+            const expressions = node.quasi.expressions;
+            return async (textToDoc, print) => printScript(script, fileName, expressions, textToDoc, print);
+        }
+    }
+    // Not ours — defer to Prettier's built-in embedding so it can still
+    // format css/graphql/styled-components and the like.
+    return estree.embed?.call(estree, path, options) ?? null;
+};
+async function printScript(script, fileName, expressions, textToDoc, print) {
+    const parser = parserForFile(fileName);
+    const docWithPlaceholders = await textToDoc(script.textWithPlaceholders, {
+        parser,
+    });
+    const body = reinjectSplices(stripTrailingSemicolon(docWithPlaceholders), script, expressions, print);
+    return ["cs", "`", isJsxRoot(script) ? wrapInParens(body) : body, "`"];
+}
+// A script that is one JSX element, parenthesized or not.
+function isJsxRoot(script) {
+    const [statement, ...rest] = script.fileWithPlaceholders.statements;
+    if (statement === undefined ||
+        rest.length > 0 ||
+        !ts.isExpressionStatement(statement)) {
+        return false;
+    }
+    let root = statement.expression;
+    while (ts.isParenthesizedExpression(root)) {
+        root = root.expression;
+    }
+    return (ts.isJsxElement(root) ||
+        ts.isJsxFragment(root) ||
+        ts.isJsxSelfClosingElement(root));
+}
+// As Prettier wraps JSX in a `return`: parens only when it breaks.
+function wrapInParens(doc) {
+    return group([ifBreak("("), indent([softline, doc]), softline, ifBreak(")")]);
+}
+function reinjectSplices(formatted, script, expressions, print) {
+    return mapDoc(formatted, (current) => {
+        if (typeof current !== "string" || !current.includes("$0splice")) {
+            return current;
+        }
+        return replacePlaceholders(current, script, expressions, print);
+    });
+}
+// Rebuild one formatted string leaf, swapping each `$0splice<n>` placeholder for
+// the real host expression `${...}` printed from the original AST. We walk the
+// matches in order, emitting the literal text before each placeholder and then
+// the spliced-in expression, finishing with whatever text trails the last one.
+function replacePlaceholders(text, script, expressions, print) {
+    const parts = [];
+    let textStart = 0;
+    for (const match of text.matchAll(/\$0splice(\d+)/g)) {
+        const spliceIndex = Number(match[1]);
+        parts.push(text.slice(textStart, match.index));
+        const expression = expressions[spliceIndex];
+        // A braced splice holding a bare identifier prints as its unbraced
+        // shorthand: `${x}` reads as `$x`. A `$`-led name keeps its braces, and so
+        // does a `${…}` in text (a string, a comment, JSX text), which isn't a
+        // splice: there `$x` would be the text itself.
+        if (script.splices[match[0]] !== undefined &&
+            expression?.type === "Identifier" &&
+            !expression.name.startsWith("$")) {
+            parts.push(`$${expression.name}`);
+        }
+        else {
+            parts.push(["${", print(["quasi", "expressions", spliceIndex]), "}"]);
+        }
+        textStart = match.index + match[0].length;
+    }
+    parts.push(text.slice(textStart));
+    return parts;
+}
+// Formatting the body as a TypeScript program adds a trailing `;` to a bare
+// final expression. It reads as noise inside a client script, so drop one if it
+// is the very last thing printed. Anything else (internal `;`, multi-statement
+// bodies) is left untouched.
+function stripTrailingSemicolon(doc) {
+    if (typeof doc === "string") {
+        return doc.replace(/;$/, "");
+    }
+    if (Array.isArray(doc) && doc.length > 0) {
+        const last = doc[doc.length - 1];
+        return [...doc.slice(0, -1), stripTrailingSemicolon(last)];
+    }
+    return doc;
+}
+let cache = null;
+function scriptsByStart(options) {
+    const { originalText } = options;
+    if (cache?.text === originalText) {
+        return cache.byStart;
+    }
+    const { sourceFile, scripts } = parseSourceText(ts, filepathOf(options) ?? "input.tsx", originalText);
+    const byStart = new Map();
+    for (const script of flattenScripts(scripts)) {
+        const start = script.sourceNode.getStart(sourceFile);
+        byStart.set(start, script);
+    }
+    cache = { text: originalText, byStart };
+    return byStart;
+}
+function filepathOf(options) {
+    return options.filepath;
+}
+function parserForFile(fileName) {
+    if (fileName?.endsWith(".js") || fileName?.endsWith(".jsx")) {
+        return "babel";
+    }
+    return "typescript";
+}
+function startOf(node) {
+    // Prettier attaches `range` for the typescript/babel parsers; fall back to the
+    // babel-style `start` field just in case.
+    const withLoc = node;
+    return withLoc.range?.[0] ?? withLoc.start ?? 0;
+}
+export const printers = {
+    estree: {
+        ...estree,
+        embed,
+    },
+};
+export default { printers };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@backtickjs/prettier-plugin",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "A Prettier plugin that formats the code inside Backtick client scripts",
+  "keywords": [
+    "backtick",
+    "react-native",
+    "server-driven-ui",
+    "server-components",
+    "prettier",
+    "prettier-plugin",
+    "formatter"
+  ],
+  "homepage": "https://backtickjs.com",
+  "bugs": {
+    "url": "https://github.com/backtickjs/backtick/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/backtickjs/backtick.git",
+    "directory": "packages/prettier-plugin"
+  },
+  "license": "MIT",
+  "author": "Jean-François Bisson <jf@backtickjs.com>",
+  "type": "module",
+  "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "!dist/._cache",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/estree": "^1.0.9",
+    "prettier": "^3.6.2",
+    "tsx": "^4.22.4",
+    "typescript": "^6.0.3"
+  },
+  "dependencies": {
+    "@backtickjs/compiler": "0.1.0"
+  },
+  "peerDependencies": {
+    "prettier": "^3.0.0",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "tsc -b --watch",
+    "format": "prettier --write --ignore-unknown .",
+    "format:check": "prettier --check --ignore-unknown .",
+    "test": "node --import tsx --test \"test/**/*.test.ts\"",
+    "test:update": "UPDATE_SNAPSHOTS=1 node --import tsx --test \"test/**/*.test.ts\"",
+    "clean": "rm -rf node_modules dist .turbo"
+  }
 }

package/src/index.ts

@@ -0,0 +1,206 @@
+import {
+  type ClientScript,
+  flattenScripts,
+  parseSourceText,
+} from "@backtickjs/compiler";
+import type { Expression, Node } from "estree";
+import {
+  type AstPath,
+  type Doc,
+  type Options,
+  type Printer,
+  doc as prettierDoc,
+} from "prettier";
+import { printers as builtinPrinters } from "prettier/plugins/estree";
+import ts from "typescript";
+
+const estree: Printer = builtinPrinters.estree;
+const { mapDoc } = prettierDoc.utils;
+const { group, ifBreak, indent, softline } = prettierDoc.builders;
+
+type Print = (selector: Array<string | number>) => Doc;
+type TextToDoc = (text: string, options: Options) => Promise<Doc>;
+
+const embed: NonNullable<Printer["embed"]> = (
+  path: AstPath<Node>,
+  options: Options,
+) => {
+  const node = path.node;
+  if (node?.type === "TaggedTemplateExpression") {
+    const script = scriptsByStart(options).get(startOf(node));
+    if (script) {
+      const fileName = filepathOf(options) ?? "input.tsx";
+      const expressions = node.quasi.expressions;
+      return async (textToDoc, print) =>
+        printScript(script, fileName, expressions, textToDoc, print);
+    }
+  }
+
+  // Not ours — defer to Prettier's built-in embedding so it can still
+  // format css/graphql/styled-components and the like.
+  return estree.embed?.call(estree, path, options) ?? null;
+};
+
+async function printScript(
+  script: ClientScript,
+  fileName: string,
+  expressions: readonly Expression[],
+  textToDoc: TextToDoc,
+  print: Print,
+): Promise<Doc> {
+  const parser = parserForFile(fileName);
+  const docWithPlaceholders = await textToDoc(script.textWithPlaceholders, {
+    parser,
+  });
+  const body = reinjectSplices(
+    stripTrailingSemicolon(docWithPlaceholders),
+    script,
+    expressions,
+    print,
+  );
+  return ["cs", "`", isJsxRoot(script) ? wrapInParens(body) : body, "`"];
+}
+
+// A script that is one JSX element, parenthesized or not.
+function isJsxRoot(script: ClientScript): boolean {
+  const [statement, ...rest] = script.fileWithPlaceholders.statements;
+  if (
+    statement === undefined ||
+    rest.length > 0 ||
+    !ts.isExpressionStatement(statement)
+  ) {
+    return false;
+  }
+  let root = statement.expression;
+  while (ts.isParenthesizedExpression(root)) {
+    root = root.expression;
+  }
+  return (
+    ts.isJsxElement(root) ||
+    ts.isJsxFragment(root) ||
+    ts.isJsxSelfClosingElement(root)
+  );
+}
+
+// As Prettier wraps JSX in a `return`: parens only when it breaks.
+function wrapInParens(doc: Doc): Doc {
+  return group([ifBreak("("), indent([softline, doc]), softline, ifBreak(")")]);
+}
+
+function reinjectSplices(
+  formatted: Doc,
+  script: ClientScript,
+  expressions: readonly Expression[],
+  print: Print,
+): Doc {
+  return mapDoc(formatted, (current) => {
+    if (typeof current !== "string" || !current.includes("$0splice")) {
+      return current;
+    }
+    return replacePlaceholders(current, script, expressions, print);
+  });
+}
+
+// Rebuild one formatted string leaf, swapping each `$0splice<n>` placeholder for
+// the real host expression `${...}` printed from the original AST. We walk the
+// matches in order, emitting the literal text before each placeholder and then
+// the spliced-in expression, finishing with whatever text trails the last one.
+function replacePlaceholders(
+  text: string,
+  script: ClientScript,
+  expressions: readonly Expression[],
+  print: Print,
+): Doc {
+  const parts: Doc[] = [];
+  let textStart = 0;
+
+  for (const match of text.matchAll(/\$0splice(\d+)/g)) {
+    const spliceIndex = Number(match[1]);
+    parts.push(text.slice(textStart, match.index));
+    const expression = expressions[spliceIndex];
+    // A braced splice holding a bare identifier prints as its unbraced
+    // shorthand: `${x}` reads as `$x`. A `$`-led name keeps its braces, and so
+    // does a `${…}` in text (a string, a comment, JSX text), which isn't a
+    // splice: there `$x` would be the text itself.
+    if (
+      script.splices[match[0]] !== undefined &&
+      expression?.type === "Identifier" &&
+      !expression.name.startsWith("$")
+    ) {
+      parts.push(`$${expression.name}`);
+    } else {
+      parts.push(["${", print(["quasi", "expressions", spliceIndex]), "}"]);
+    }
+    textStart = match.index + match[0].length;
+  }
+
+  parts.push(text.slice(textStart));
+  return parts;
+}
+
+// Formatting the body as a TypeScript program adds a trailing `;` to a bare
+// final expression. It reads as noise inside a client script, so drop one if it
+// is the very last thing printed. Anything else (internal `;`, multi-statement
+// bodies) is left untouched.
+function stripTrailingSemicolon(doc: Doc): Doc {
+  if (typeof doc === "string") {
+    return doc.replace(/;$/, "");
+  }
+  if (Array.isArray(doc) && doc.length > 0) {
+    const last = doc[doc.length - 1];
+    return [...doc.slice(0, -1), stripTrailingSemicolon(last)];
+  }
+  return doc;
+}
+
+let cache: { text: string; byStart: Map<number, ClientScript> } | null = null;
+
+function scriptsByStart(options: Options): Map<number, ClientScript> {
+  const { originalText } = options as { originalText: string };
+
+  if (cache?.text === originalText) {
+    return cache.byStart;
+  }
+
+  const { sourceFile, scripts } = parseSourceText(
+    ts,
+    filepathOf(options) ?? "input.tsx",
+    originalText,
+  );
+
+  const byStart = new Map<number, ClientScript>();
+  for (const script of flattenScripts(scripts)) {
+    const start = script.sourceNode.getStart(sourceFile);
+    byStart.set(start, script);
+  }
+
+  cache = { text: originalText, byStart };
+  return byStart;
+}
+
+function filepathOf(options: Options): string | undefined {
+  return (options as { filepath?: string }).filepath;
+}
+
+function parserForFile(fileName: string): "babel" | "typescript" {
+  if (fileName?.endsWith(".js") || fileName?.endsWith(".jsx")) {
+    return "babel";
+  }
+  return "typescript";
+}
+
+function startOf(node: Node): number {
+  // Prettier attaches `range` for the typescript/babel parsers; fall back to the
+  // babel-style `start` field just in case.
+  const withLoc = node as { range?: [number, number]; start?: number };
+  return withLoc.range?.[0] ?? withLoc.start ?? 0;
+}
+
+export const printers: Record<string, Printer> = {
+  estree: {
+    ...estree,
+    embed,
+  },
+};
+
+export default { printers };