@terrazzo/plugin-js 0.0.0 → 0.0.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Drew Powers
+Copyright (c) 2024 Drew Powers
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ 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.
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# ⛋ @terrazzo/plugin-js
+
+Generate JavaScript, TypeScript, and JSON from DTCG tokens.
+
+## Setup
+
+Requires [Node.js 18 or later](https://nodejs.org). With that installed, run:
+
+```sh
+npm i -D @terrazzo/cli @terrazzo/plugin-js
+```
+
+Add a `terrazzo.config.js` to the root of your project with:
+
+```ts
+import { defineConfig } from "@terrazzo/cli";
+import js from "@terrazzo/plugin-js";
+
+export default defineConfig({
+  outDir: "./tokens/",
+  plugins: [
+    js({
+      js: "index.js",
+      // json: "tokens.json",
+    }),
+  ],
+});
+```
+
+Lastly, run:
+
+```sh
+npx tz build
+```
+
+And you’ll see a `./tokens/index.js` file generated in your project.
+
+[Full Documentation](https://terrazzo.app/docs/integrations/js)

package/package.json

@@ -1,31 +1,37 @@
 {
   "name": "@terrazzo/plugin-js",
+  "version": "0.0.1",
   "description": "Generate JS, TS, and JSON from your design tokens schema (requires @terrazzo/cli)",
-  "version": "0.0.0",
+  "type": "module",
   "author": {
     "name": "Drew Powers",
     "email": "drew@pow.rs"
   },
   "keywords": [
     "design tokens",
-    "design tokens community group",
-    "design tokens format module",
     "design system",
     "dtcg",
-    "w3c design tokens"
+    "w3c",
+    "ts",
+    "typescript"
   ],
-  "license": "MIT",
-  "type": "module",
   "main": "./dist/index.js",
+  "homepage": "https://terrazzoapp.com/docs/cli/integrations/js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/terrazzoapp/terrazzo.git",
+    "directory": "./packages/plugin-js/"
+  },
+  "license": "MIT",
   "peerDependencies": {
-    "@terrazzo/cli": "^0.0.6"
+    "@terrazzo/cli": "^0.0.11"
   },
   "dependencies": {
-    "@terrazzo/token-tools": "^0.0.2"
+    "@terrazzo/token-tools": "^0.0.4"
   },
   "devDependencies": {
-    "@terrazzo/parser": "^0.0.6",
-    "@terrazzo/cli": "^0.0.6"
+    "@terrazzo/cli": "^0.0.11",
+    "@terrazzo/parser": "^0.0.11"
   },
   "scripts": {
     "build": "pnpm run build:clean && pnpm run build:ts && pnpm run build:license",
@@ -34,7 +40,7 @@
     "build:license": "node ../../scripts/inject-license.js @terrazzo/plugin-js dist/index.js",
     "dev": "tsc -p tsconfig.build.json -w",
     "lint": "biome check .",
-    "test": "co build -c ./test/types.tokens.mjs && pnpm run \"/^test:.*/\"",
+    "test": "pnpm --filter @terrazzo/plugin-js run \"/^test:*/\"",
     "test:js": "vitest run",
     "test:ts": "tsc --noEmit"
   }

package/biome.json

@@ -1,15 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
-  "extends": ["../../biome.json"],
-  "files": {
-    "include": ["./src/", "./test/"],
-    "ignore": [
-      "./test/fixtures/**/*.js",
-      "./test/fixtures/**/*.json",
-      "./test/fixtures/**/*.d.ts",
-      "./test/**/actual.*",
-      "./test/**/want.*",
-      "./test/types/"
-    ]
-  }
-}

package/src/build.ts

@@ -1,67 +0,0 @@
-import type { BuildHookOptions } from '@terrazzo/parser';
-import { FILE_HEADER, FORMAT_DTS_ID, FORMAT_JS_ID, TYPE_MAP } from './lib.js';
-
-export function buildJS({ getTransforms }: { getTransforms: BuildHookOptions['getTransforms'] }): string {
-  const output: string[] = [FILE_HEADER, ''];
-
-  // gather vals
-  const tokenVals: Record<string, Record<string, string>> = {};
-  for (const token of getTransforms({ format: FORMAT_JS_ID, id: '*' })) {
-    if (!tokenVals[token.token.id]) {
-      tokenVals[token.token.id] = {};
-    }
-    tokenVals[token.token.id]![token.mode] = token.value as string;
-  }
-
-  // body
-  output.push('export const tokens = {');
-  for (const id in tokenVals) {
-    output.push(`  "${id}": {`);
-    for (const mode in tokenVals[id]) {
-      output.push(`    "${mode}": ${tokenVals[id]![mode]},`);
-    }
-    output.push('  },');
-  }
-  output.push('};', '');
-
-  // footer
-  output.push(
-    `/** Get individual token */
-export function token(tokenID, modeName = ".") {
-  return tokens[tokenID]?.[modeName];
-}`,
-    '',
-  );
-
-  return output.join('\n');
-}
-
-export function buildDTS({ getTransforms }: { getTransforms: BuildHookOptions['getTransforms'] }): string {
-  const output: string[] = [FILE_HEADER, ''];
-
-  const importDeps = new Set<string>();
-  const types = getTransforms({ format: FORMAT_DTS_ID, id: '*', mode: '.' }).map((t) => {
-    importDeps.add(TYPE_MAP[t.token.$type]); // collect only necessary types
-    if (t.type === 'MULTI_VALUE') {
-      const description = t.value.description ? `  /** ${t.value.description} */\n` : '';
-      return `${description}  "${t.token.id}": ${t.value.value};`;
-    }
-    return `"${t.token.id}": ${t.value};`;
-  });
-
-  output.push(
-    'import type {',
-    ...[...importDeps].sort((a, b) => a.localeCompare(b)).map((dep) => `  ${dep},`),
-    '} from "@terrazzo/parser";',
-    '',
-    'export declare const tokens: {',
-    ...types,
-    '};',
-    '',
-    `export declare function token<K extends keyof typeof tokens>(tokenID: K, modeName?: never): (typeof tokens)[K]["."];
-export declare function token<K extends keyof typeof tokens, M extends keyof (typeof tokens)[K]>(tokenID: K, modeName: M): (typeof tokens)[K][M];`,
-    '',
-  );
-
-  return output.join('\n');
-}

package/src/index.ts

@@ -1,66 +0,0 @@
-import type { Plugin } from '@terrazzo/parser';
-import { transformJSValue } from '@terrazzo/token-tools/js';
-import { FORMAT_DTS_ID, FORMAT_JS_ID, TYPE_MAP, type JSPluginOptions } from './lib.js';
-import { buildDTS, buildJS } from './build.js';
-
-export * from './build.js';
-export * from './lib.js';
-
-export default function pluginJS(options?: JSPluginOptions): Plugin {
-  const customTransform = options?.transform;
-
-  return {
-    name: '@terrazzo/plugin-js',
-    async transform({ tokens, getTransforms, setTransform }) {
-      // skip work if another .js plugin has already run
-      const jsTokens = getTransforms({ format: FORMAT_JS_ID, id: '*', mode: '.' });
-      if (jsTokens.length) {
-        return;
-      }
-
-      for (const id in tokens) {
-        const token = tokens[id]!;
-
-        // .d.ts (only default "." mode needed)
-        setTransform(id, {
-          format: FORMAT_DTS_ID,
-          value: {
-            description: token.$description,
-            value: `Record<"${Object.keys(token.mode).join('" | "')}", ${TYPE_MAP[token.$type]}["$value"]>`,
-          },
-          mode: '.',
-        });
-
-        // .js (all modes)
-        for (const mode in token.mode) {
-          if (customTransform) {
-            const transformedValue = customTransform(token, mode);
-            if (transformedValue !== undefined && transformedValue !== null) {
-              setTransform(id, { format: FORMAT_JS_ID, value: transformedValue, mode });
-              continue;
-            }
-          }
-          const transformedValue = transformJSValue(token, { mode, startingIndent: 4 });
-          if (transformedValue !== undefined) {
-            setTransform(id, { format: FORMAT_JS_ID, value: transformedValue, mode });
-          }
-        }
-      }
-    },
-    async build({ getTransforms, outputFile }) {
-      // if (options?.json) {
-      //   const contents = buildJSON({ getTransforms });
-      //   outputFile(typeof options?.json === 'string' ? options.json : 'index.json', contents);
-      // }
-      if (options?.js) {
-        const js = buildJS({ getTransforms });
-        const jsFilename = typeof options?.js === 'string' ? options.js : 'index.js';
-        outputFile(jsFilename, js);
-
-        const dts = buildDTS({ getTransforms });
-        const dtsFilename = typeof options?.js === 'string' ? options.js.replace(/\.js$/, '.d.ts') : 'index.d.ts';
-        outputFile(dtsFilename, dts);
-      }
-    },
-  };
-}

package/src/lib.ts

@@ -1,40 +0,0 @@
-import type { Token, TokenNormalized, TokenTransformed } from '@terrazzo/parser';
-
-export const FORMAT_JS_ID = 'js';
-export const FORMAT_DTS_ID = 'd.ts';
-
-export interface JSPluginOptions {
-  /** output JS? (default: true) */
-  js?: boolean | string;
-  /** output JSON? (default: false) */
-  json?: boolean | string;
-  /** exclude token IDs from output? */
-  exclude?: string[];
-  /** return deeply-nested values? (default: false) */
-  deep?: boolean;
-  /** Override certain token values */
-  transform?: (token: TokenNormalized, mode: string) => TokenTransformed['value'];
-}
-
-export const FILE_HEADER = `/** ------------------------------------------
- *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
- * ------------------------------------------- */`;
-
-export const TYPE_MAP: Record<Token['$type'], string> = {
-  boolean: 'BooleanTokenNormalized',
-  border: 'BorderTokenNormalized',
-  color: 'ColorTokenNormalized',
-  cubicBezier: 'CubicBezierTokenNormalized',
-  dimension: 'DimensionTokenNormalized',
-  duration: 'DurationTokenNormalized',
-  fontFamily: 'FontFamilyTokenNormalized',
-  fontWeight: 'FontWeightTokenNormalized',
-  gradient: 'GradientTokenNormalized',
-  link: 'LinkTokenNormalized',
-  number: 'NumberTokenNormalized',
-  shadow: 'ShadowTokenNormalized',
-  string: 'StringTokenNormalized',
-  strokeStyle: 'StrokeStyleTokenNormalized',
-  typography: 'TypographyTokenNormalized',
-  transition: 'TransitionTokenNormalized',
-};