@ryndesign/preview 0.1.1

package/dist/index.js

@@ -0,0 +1,660 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// ../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/utils.js
+var init_utils = __esm({
+  "../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/utils.js"() {
+    "use strict";
+  }
+});
+
+// ../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/filter/composable-filters.js
+var init_composable_filters = __esm({
+  "../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/filter/composable-filters.js"() {
+    "use strict";
+    init_utils();
+  }
+});
+
+// ../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/filter/filter-vite-plugins.js
+var init_filter_vite_plugins = __esm({
+  "../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/filter/filter-vite-plugins.js"() {
+    "use strict";
+  }
+});
+
+// ../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/filter/simple-filters.js
+function exactRegex(str, flags) {
+  return new RegExp(`^${escapeRegex(str)}$`, flags);
+}
+function escapeRegex(str) {
+  return str.replace(escapeRegexRE, "\\$&");
+}
+function makeIdFiltersToMatchWithQuery(input) {
+  if (!Array.isArray(input)) {
+    return makeIdFilterToMatchWithQuery(
+      // Array.isArray cannot narrow the type
+      // https://github.com/microsoft/TypeScript/issues/17002
+      input
+    );
+  }
+  return input.map((i) => makeIdFilterToMatchWithQuery(i));
+}
+function makeIdFilterToMatchWithQuery(input) {
+  if (typeof input === "string") {
+    return `${input}{?*,}`;
+  }
+  return makeRegexIdFilterToMatchWithQuery(input);
+}
+function makeRegexIdFilterToMatchWithQuery(input) {
+  return new RegExp(
+    // replace `$` with `(?:\?.*)?$` (ignore `\$`)
+    input.source.replace(/(?<!\\)\$/g, "(?:\\?.*)?$"),
+    input.flags
+  );
+}
+var escapeRegexRE;
+var init_simple_filters = __esm({
+  "../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/filter/simple-filters.js"() {
+    "use strict";
+    escapeRegexRE = /[-/\\^$*+?.()|[\]{}]/g;
+  }
+});
+
+// ../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/filter/index.js
+var init_filter = __esm({
+  "../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/filter/index.js"() {
+    "use strict";
+    init_composable_filters();
+    init_filter_vite_plugins();
+    init_simple_filters();
+  }
+});
+
+// ../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/index.js
+var init_dist = __esm({
+  "../../node_modules/.pnpm/@rolldown+pluginutils@1.0.0-rc.7/node_modules/@rolldown/pluginutils/dist/index.js"() {
+    "use strict";
+    init_filter();
+  }
+});
+
+// ../../node_modules/.pnpm/@vitejs+plugin-react@6.0.1_vite@6.4.1_@types+node@25.5.0_jiti@2.6.1_/node_modules/@vitejs/plugin-react/dist/index.js
+var dist_exports = {};
+__export(dist_exports, {
+  default: () => viteReact,
+  "module.exports": () => viteReactForCjs,
+  reactCompilerPreset: () => reactCompilerPreset
+});
+import { readFileSync } from "fs";
+import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+import { reactRefreshWrapperPlugin } from "vite/internal";
+function virtualPreamblePlugin({ name, isEnabled }) {
+  return {
+    name: "vite:react-virtual-preamble",
+    resolveId: {
+      order: "pre",
+      filter: { id: exactRegex(name) },
+      handler(source) {
+        if (source === name) return "\0" + source;
+      }
+    },
+    load: {
+      filter: { id: exactRegex("\0" + name) },
+      handler(id) {
+        if (id === "\0" + name) {
+          if (isEnabled()) return preambleCode.replace("__BASE__", "/");
+          return "";
+        }
+      }
+    }
+  };
+}
+function viteReact(opts = {}) {
+  const include = opts.include ?? defaultIncludeRE;
+  const exclude = opts.exclude ?? defaultExcludeRE;
+  const jsxImportSource = opts.jsxImportSource ?? "react";
+  const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
+  const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
+  let runningInVite = false;
+  let isProduction = true;
+  let skipFastRefresh = true;
+  let base;
+  let isBundledDev = false;
+  const viteBabel = {
+    name: "vite:react-babel",
+    enforce: "pre",
+    config(_userConfig, { command }) {
+      if (opts.jsxRuntime === "classic") return { oxc: {
+        jsx: {
+          runtime: "classic",
+          refresh: command === "serve"
+        },
+        jsxRefreshInclude: makeIdFiltersToMatchWithQuery(include),
+        jsxRefreshExclude: makeIdFiltersToMatchWithQuery(exclude)
+      } };
+      else return {
+        oxc: {
+          jsx: {
+            runtime: "automatic",
+            importSource: opts.jsxImportSource,
+            refresh: command === "serve"
+          },
+          jsxRefreshInclude: makeIdFiltersToMatchWithQuery(include),
+          jsxRefreshExclude: makeIdFiltersToMatchWithQuery(exclude)
+        },
+        optimizeDeps: { rolldownOptions: { transform: { jsx: { runtime: "automatic" } } } }
+      };
+    },
+    configResolved(config) {
+      runningInVite = true;
+      base = config.base;
+      if (config.experimental.bundledDev) isBundledDev = true;
+      isProduction = config.isProduction;
+      skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
+    },
+    options(options) {
+      if (!runningInVite) {
+        options.transform ??= {};
+        options.transform.jsx = {
+          runtime: opts.jsxRuntime,
+          importSource: opts.jsxImportSource
+        };
+        return options;
+      }
+    }
+  };
+  const viteRefreshWrapper = {
+    name: "vite:react:refresh-wrapper",
+    apply: "serve",
+    async applyToEnvironment(env) {
+      if (env.config.consumer !== "client" || skipFastRefresh) return false;
+      return reactRefreshWrapperPlugin({
+        cwd: process.cwd(),
+        include: makeIdFiltersToMatchWithQuery(include),
+        exclude: makeIdFiltersToMatchWithQuery(exclude),
+        jsxImportSource,
+        reactRefreshHost: opts.reactRefreshHost ?? ""
+      });
+    }
+  };
+  const viteConfigPost = {
+    name: "vite:react:config-post",
+    enforce: "post",
+    config(userConfig) {
+      if (userConfig.server?.hmr === false) return { oxc: { jsx: { refresh: false } } };
+    }
+  };
+  const viteReactRefreshBundledDevMode = {
+    name: "vite:react-refresh-fbm",
+    enforce: "pre",
+    transformIndexHtml: {
+      handler() {
+        if (!skipFastRefresh && isBundledDev) return [{
+          tag: "script",
+          attrs: { type: "module" },
+          children: getPreambleCode(base)
+        }];
+      },
+      order: "pre"
+    }
+  };
+  const dependencies = [
+    "react",
+    "react-dom",
+    jsxImportDevRuntime,
+    jsxImportRuntime
+  ];
+  return [
+    viteBabel,
+    viteRefreshWrapper,
+    viteConfigPost,
+    viteReactRefreshBundledDevMode,
+    {
+      name: "vite:react-refresh",
+      enforce: "pre",
+      config: (userConfig) => ({
+        build: silenceUseClientWarning(userConfig),
+        optimizeDeps: { include: dependencies }
+      }),
+      resolveId: {
+        filter: { id: exactRegex(runtimePublicPath) },
+        handler(id) {
+          if (id === "/@react-refresh") return id;
+        }
+      },
+      load: {
+        filter: { id: exactRegex(runtimePublicPath) },
+        handler(id) {
+          if (id === "/@react-refresh") return readFileSync(refreshRuntimePath, "utf-8").replace(/__README_URL__/g, "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react");
+        }
+      },
+      transformIndexHtml() {
+        if (!skipFastRefresh && !isBundledDev) return [{
+          tag: "script",
+          attrs: { type: "module" },
+          children: getPreambleCode(base)
+        }];
+      }
+    },
+    virtualPreamblePlugin({
+      name: "@vitejs/plugin-react/preamble",
+      isEnabled: () => !skipFastRefresh && !isBundledDev
+    })
+  ];
+}
+function viteReactForCjs(options) {
+  return viteReact.call(this, options);
+}
+var runtimePublicPath, preambleCode, getPreambleCode, silenceUseClientWarning, reactCompilerPreset, refreshRuntimePath, defaultIncludeRE, defaultExcludeRE;
+var init_dist2 = __esm({
+  "../../node_modules/.pnpm/@vitejs+plugin-react@6.0.1_vite@6.4.1_@types+node@25.5.0_jiti@2.6.1_/node_modules/@vitejs/plugin-react/dist/index.js"() {
+    "use strict";
+    init_dist();
+    runtimePublicPath = "/@react-refresh";
+    preambleCode = `import { injectIntoGlobalHook } from "__BASE__${runtimePublicPath.slice(1)}";
+injectIntoGlobalHook(window);
+window.$RefreshReg$ = () => {};
+window.$RefreshSig$ = () => (type) => type;`;
+    getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
+    silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
+      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) return;
+      if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) return;
+      if (userConfig.build?.rollupOptions?.onwarn) userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
+      else defaultHandler(warning);
+    } } });
+    reactCompilerPreset = (options = {}) => ({
+      preset: () => ({ plugins: [["babel-plugin-react-compiler", options]] }),
+      rolldown: {
+        filter: { code: options.compilationMode === "annotation" ? /['"]use memo['"]/ : /\b[A-Z]|\buse/ },
+        applyToEnvironmentHook: (env) => env.config.consumer === "client",
+        optimizeDeps: { include: options.target === "17" || options.target === "18" ? ["react-compiler-runtime"] : ["react/compiler-runtime"] }
+      }
+    });
+    refreshRuntimePath = join(dirname(fileURLToPath(import.meta.url)), "refresh-runtime.js");
+    defaultIncludeRE = /\.[tj]sx?$/;
+    defaultExcludeRE = /\/node_modules\//;
+    viteReact.preambleCode = preambleCode;
+    Object.assign(viteReactForCjs, {
+      default: viteReactForCjs,
+      reactCompilerPreset
+    });
+  }
+});
+
+// src/server/index.ts
+import { createServer as createViteServer } from "vite";
+import { WebSocketServer } from "ws";
+import http from "http";
+import path2 from "path";
+
+// src/server/api-routes.ts
+function setupApiRoutes(builder) {
+  return (req, res) => {
+    const url = new URL(req.url ?? "/", `http://${req.headers.host}`);
+    const pathname = url.pathname;
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+    if (req.method === "OPTIONS") {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+    try {
+      if (pathname === "/api/tokens" && req.method === "GET") {
+        json(res, builder.getTokenSet());
+      } else if (pathname === "/api/themes" && req.method === "GET") {
+        json(res, builder.getThemes());
+      } else if (pathname === "/api/components" && req.method === "GET") {
+        json(res, builder.getComponents());
+      } else if (pathname === "/api/snippets" && req.method === "GET") {
+        const platform = url.searchParams.get("platform") ?? "react";
+        const component = url.searchParams.get("component") ?? void 0;
+        const type = url.searchParams.get("type") ?? void 0;
+        builder.generateSnippets(platform, component, type).then((code) => {
+          json(res, { code });
+        }).catch((err) => {
+          res.writeHead(500);
+          json(res, { error: err.message });
+        });
+        return;
+      } else if (pathname === "/api/tokens" && req.method === "PUT") {
+        let body = "";
+        req.on("data", (chunk) => {
+          body += chunk;
+        });
+        req.on("end", async () => {
+          const { path: path3, value, theme } = JSON.parse(body);
+          await builder.updateToken(path3, value, theme);
+          json(res, { success: true });
+        });
+      } else if (pathname === "/api/generated" && req.method === "GET") {
+        const platform = url.searchParams.get("platform");
+        json(res, builder.getGeneratedFiles(platform ?? void 0));
+      } else {
+        res.writeHead(404);
+        json(res, { error: "Not found" });
+      }
+    } catch (err) {
+      res.writeHead(500);
+      json(res, { error: err.message });
+    }
+  };
+}
+function json(res, data) {
+  if (!res.headersSent) {
+    res.setHeader("Content-Type", "application/json");
+  }
+  res.end(JSON.stringify(data));
+}
+
+// src/server/ws-handler.ts
+function setupWsHandler(wss, builder) {
+  wss.on("connection", (ws) => {
+    console.log("Preview client connected");
+    ws.send(JSON.stringify({
+      type: "init",
+      tokenSet: builder.getTokenSet(),
+      themes: builder.getThemes(),
+      components: builder.getComponents()
+    }));
+    ws.on("message", async (data) => {
+      try {
+        const message = JSON.parse(data.toString());
+        switch (message.type) {
+          case "token-update": {
+            const update = message;
+            await builder.updateToken(update.path, update.value, update.theme);
+            broadcast(wss, {
+              type: "rebuild-complete",
+              changedTokens: [update.path],
+              timestamp: Date.now()
+            });
+            break;
+          }
+          case "theme-change": {
+            const themeMsg = message;
+            broadcast(wss, {
+              type: "theme-switched",
+              theme: themeMsg.theme,
+              tokens: builder.getThemeTokens(themeMsg.theme)
+            });
+            break;
+          }
+          case "request-state": {
+            ws.send(JSON.stringify({
+              type: "full-state",
+              tokenSet: builder.getTokenSet(),
+              themes: builder.getThemes(),
+              components: builder.getComponents()
+            }));
+            break;
+          }
+        }
+      } catch (err) {
+        ws.send(JSON.stringify({
+          type: "error",
+          message: err.message
+        }));
+      }
+    });
+    ws.on("close", () => {
+      console.log("Preview client disconnected");
+    });
+  });
+}
+function broadcast(wss, message) {
+  const data = JSON.stringify(message);
+  for (const client of wss.clients) {
+    if (client.readyState === 1) {
+      client.send(data);
+    }
+  }
+}
+
+// src/server/watcher.ts
+import { watch } from "chokidar";
+function setupWatcher(builder, wss, cwd) {
+  const watcher = watch(
+    ["tokens/**/*.tokens.json", "components/**/*.component.json"],
+    {
+      cwd,
+      ignoreInitial: true,
+      awaitWriteFinish: {
+        stabilityThreshold: 300,
+        pollInterval: 50
+      }
+    }
+  );
+  let debounceTimer = null;
+  const handleChange = (changedPath) => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(async () => {
+      console.log(`File changed: ${changedPath}`);
+      try {
+        await builder.rebuild();
+        const data = JSON.stringify({
+          type: "rebuild-complete",
+          changedTokens: [],
+          timestamp: Date.now(),
+          tokenSet: builder.getTokenSet(),
+          components: builder.getComponents()
+        });
+        for (const client of wss.clients) {
+          if (client.readyState === 1) {
+            client.send(data);
+          }
+        }
+      } catch (err) {
+        console.error("Rebuild failed:", err.message);
+      }
+    }, 300);
+  };
+  watcher.on("change", handleChange);
+  watcher.on("add", handleChange);
+  watcher.on("unlink", handleChange);
+}
+
+// src/server/incremental-build.ts
+import { buildTokenSet, loadComponents, resolveComponent } from "@ryndesign/core";
+import fs from "fs/promises";
+import path from "path";
+var IncrementalBuilder = class {
+  tokenSet = null;
+  components = [];
+  generatedFiles = /* @__PURE__ */ new Map();
+  generators = [];
+  cwd;
+  configPath;
+  constructor(cwd, configPath) {
+    this.cwd = cwd;
+    this.configPath = configPath;
+  }
+  async initialBuild() {
+    await this.rebuild();
+  }
+  async rebuild() {
+    const configFile = this.configPath ?? "ryndesign.config.ts";
+    const tokens = ["tokens/**/*.tokens.json"];
+    const componentPatterns = ["components/**/*.component.json"];
+    let themes = void 0;
+    try {
+      const configPath = path.resolve(this.cwd, configFile);
+      const content = await fs.readFile(configPath, "utf-8");
+      if (content.includes("dark")) {
+        themes = {
+          default: "light",
+          dark: { file: path.resolve(this.cwd, "tokens/dark.tokens.json") }
+        };
+      }
+    } catch {
+    }
+    this.tokenSet = await buildTokenSet({
+      tokens,
+      basePath: this.cwd,
+      themes
+    });
+    try {
+      const componentDefs = await loadComponents(componentPatterns, this.cwd);
+      this.components = componentDefs.map((def) => resolveComponent(def, this.tokenSet));
+    } catch {
+      this.components = [];
+    }
+  }
+  getTokenSet() {
+    return this.tokenSet;
+  }
+  getThemes() {
+    if (!this.tokenSet) return {};
+    return {
+      default: this.tokenSet.themes.default,
+      available: Object.keys(this.tokenSet.themes.themes),
+      themes: this.tokenSet.themes.themes
+    };
+  }
+  getThemeTokens(theme) {
+    if (!this.tokenSet) return {};
+    const themeData = this.tokenSet.themes.themes[theme];
+    if (!themeData) return {};
+    return {
+      name: themeData.name,
+      tokens: themeData.tokens
+    };
+  }
+  getComponents() {
+    return this.components;
+  }
+  setGenerators(generators) {
+    this.generators = generators;
+  }
+  async generateSnippets(platform, componentName, type) {
+    if (!this.tokenSet) return "";
+    const generator = this.generators.find((g) => g.name === platform);
+    if (!generator) return `// Generator for "${platform}" not available`;
+    const { createGeneratorHelpers } = await import("@ryndesign/core");
+    const ctx = {
+      tokenSet: this.tokenSet,
+      config: { outDir: "generated" },
+      outputDir: path.resolve(this.cwd, "generated"),
+      helpers: createGeneratorHelpers(),
+      components: this.components
+    };
+    try {
+      if (type === "tokens") {
+        const files = await generator.generateTokens(ctx);
+        return files.map((f) => `// ${f.path}
+${f.content}`).join("\n\n");
+      }
+      if (componentName) {
+        const comp = this.components.find((c) => c.definition.name === componentName);
+        if (comp) {
+          const files = await generator.generateComponent(comp, ctx);
+          return files.map((f) => `// ${f.path}
+${f.content}`).join("\n\n");
+        }
+        return `// Component "${componentName}" not found`;
+      }
+      return "// Specify a component or type=tokens";
+    } catch (err) {
+      return `// Error: ${err.message}`;
+    }
+  }
+  getGeneratedFiles(platform) {
+    if (!platform) {
+      return Array.from(this.generatedFiles.values()).flat();
+    }
+    return this.generatedFiles.get(platform) ?? [];
+  }
+  async updateToken(tokenPath, value, theme) {
+    const filePath = theme ? path.resolve(this.cwd, `tokens/${theme}.tokens.json`) : path.resolve(this.cwd, "tokens/semantic.tokens.json");
+    try {
+      const content = await fs.readFile(filePath, "utf-8");
+      const tree = JSON.parse(content);
+      const parts = tokenPath.split(".");
+      let current = tree;
+      for (let i = 0; i < parts.length - 1; i++) {
+        if (!current[parts[i]]) current[parts[i]] = {};
+        current = current[parts[i]];
+      }
+      const lastKey = parts[parts.length - 1];
+      if (current[lastKey] && typeof current[lastKey] === "object" && "$value" in current[lastKey]) {
+        current[lastKey].$value = value;
+      } else {
+        current[lastKey] = { $type: "color", $value: value };
+      }
+      await fs.writeFile(filePath, JSON.stringify(tree, null, 2), "utf-8");
+      await this.rebuild();
+    } catch (err) {
+      console.error(`Failed to update token: ${err.message}`);
+      throw err;
+    }
+  }
+};
+
+// src/server/index.ts
+async function startPreviewServer(options = {}) {
+  const port = options.port ?? 4400;
+  const cwd = process.cwd();
+  const builder = new IncrementalBuilder(cwd, options.configPath);
+  await builder.initialBuild();
+  const server = http.createServer();
+  const wss = new WebSocketServer({ server });
+  setupWsHandler(wss, builder);
+  let reactPlugin;
+  try {
+    const mod = await Promise.resolve().then(() => (init_dist2(), dist_exports));
+    reactPlugin = (mod.default ?? mod)();
+  } catch {
+  }
+  const vite = await createViteServer({
+    root: path2.resolve(__dirname, "../client"),
+    server: {
+      middlewareMode: true,
+      hmr: { server }
+    },
+    plugins: reactPlugin ? [reactPlugin] : [],
+    appType: "spa"
+  });
+  const apiHandler = setupApiRoutes(builder);
+  server.on("request", (req, res) => {
+    if (req.url?.startsWith("/api/")) {
+      apiHandler(req, res);
+    } else {
+      vite.middlewares(req, res);
+    }
+  });
+  setupWatcher(builder, wss, cwd);
+  server.listen(port, () => {
+    console.log(`
+  \u{1F3A8} RynDesign Preview`);
+    console.log(`  \u279C Local:   http://localhost:${port}/`);
+    console.log(`  \u279C WS:      ws://localhost:${port}/
+`);
+    if (options.open) {
+      import("child_process").then((cp) => {
+        const cmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+        cp.exec(`${cmd} http://localhost:${port}/`);
+      }).catch(() => {
+      });
+    }
+  });
+  process.on("SIGINT", () => {
+    wss.close();
+    vite.close();
+    server.close();
+    process.exit(0);
+  });
+}
+export {
+  startPreviewServer
+};
+//# sourceMappingURL=index.js.map