nowebcli 0.2.1

package/templates/shadersRuntime.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import { Shader as BaseShader } from "shaders/react";
+import type { ComponentProps } from "react";
+
+export * from "shaders/react";
+
+export function Shader(props: ComponentProps<typeof BaseShader>) {
+  return <BaseShader {...props} disableTelemetry={true} />;
+}

package/templates/templateCompiler.ts

@@ -0,0 +1,200 @@
+import { execFile } from "node:child_process";
+import { existsSync } from "node:fs";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { promisify } from "node:util";
+import type { ComponentType } from "react";
+import type { CustomizationValue, TemplateCustomization } from "../lib/customizations";
+import { compileTailwindForTemplate } from "./compileTailwind.ts";
+import { validateTemplateCode } from "./validateTemplateCode.ts";
+
+const run = promisify(execFile);
+const templatesPath = path.dirname(fileURLToPath(import.meta.url));
+const packageModulesPath = path.join(path.dirname(templatesPath), "node_modules");
+const modulesPath = existsSync(path.join(packageModulesPath, ".bin", "esbuild"))
+  ? packageModulesPath
+  : path.join(process.cwd(), "node_modules");
+
+const TEMPLATE_COMPILE_TIMEOUT_MS = 10_000;
+const TEMPLATE_COMPILE_MAX_BUFFER = 8 * 1024 * 1024;
+const TEMPLATE_RUNTIME_IMPORT = "noweb";
+const TEMPLATE_RUNTIME_IMPORTS = [TEMPLATE_RUNTIME_IMPORT, "@noweb"];
+const SHADERS_RUNTIME_IMPORT = "@noweb/shaders";
+
+export type TemplateCustomizationDefinition = Pick<TemplateCustomization, "fieldId" | "name" | "defaultValue">;
+
+type CompiledTemplate = {
+  component?: ComponentType<Record<string, unknown>>;
+  customizations?: unknown[];
+  customization?: unknown[];
+};
+
+export async function compileTemplate(
+  code: string,
+): Promise<ComponentType<Record<string, unknown>> | CompiledTemplate> {
+  validateTemplateCode(code);
+  const dir = await mkdtemp(path.join(tmpdir(), "template-"));
+  const input = path.join(dir, "template.tsx");
+  const output = path.join(dir, "bundle.mjs");
+
+  try {
+    await writeFile(input, withRuntimeImports(code));
+    const nodePath = modulesPath;
+
+    await runTemplateCommand(path.join(nodePath, ".bin", "esbuild"), [
+      input,
+      "--bundle",
+      "--format=esm",
+      "--platform=browser",
+      ...runtimeAliases(),
+      `--outfile=${output}`,
+    ], nodePath);
+
+    const dynamicImport = new Function("specifier", "return import(specifier)") as (
+      specifier: string,
+    ) => Promise<{ default: unknown }>;
+    const compiled = await dynamicImport(`file://${output}?t=${Date.now()}`);
+    const template = compiled.default as CompiledTemplate;
+    if (!template) throw new Error("Template must default-export a component or object.");
+    return template.component ?? template;
+  } finally {
+    await rm(dir, { force: true, recursive: true });
+  }
+}
+
+export async function compileTemplateBundle(
+  code: string,
+  customizations: TemplateCustomizationDefinition[] = [],
+  assetBase = "/assets",
+) {
+  validateTemplateCode(code);
+  const dir = await mkdtemp(path.join(tmpdir(), "template-"));
+  const input = path.join(dir, "template.tsx");
+  const entry = path.join(dir, "entry.tsx");
+  const output = path.join(dir, "bundle.js");
+
+  try {
+    await writeFile(input, withRuntimeImports(code));
+    await writeFile(
+      entry,
+      `
+import React from "react";
+import { createRoot } from "react-dom/client";
+import template from "./template";
+import {
+  configureTemplateRuntime,
+  TemplateRuntimeProvider,
+} from "${TEMPLATE_RUNTIME_IMPORT}";
+
+const Component = template?.component ?? template;
+const customizationDefaults = ${JSON.stringify(customizationDefaults(customizations))};
+let root;
+
+window.__nowebRenderTemplate = (element, props) => {
+  if (!Component) {
+    element.textContent = "Template must default-export a component or object.";
+    return () => {};
+  }
+  root ??= createRoot(element);
+  const values = props?.customizations ?? props?.userCustomizations ?? props?.uc ?? null;
+  configureTemplateRuntime(values, customizationDefaults, {
+    assetBase: ${JSON.stringify(assetBase)},
+    dataApiBase: props?.dataApiBase,
+    projectId: props?.projectId == null ? undefined : String(props.projectId),
+  });
+  root.render(
+    React.createElement(
+      TemplateRuntimeProvider,
+      { customizations: values, defaults: customizationDefaults },
+      React.createElement(Component, props),
+    ),
+  );
+  return () => {};
+};
+`,
+    );
+
+    const nodePath = modulesPath;
+
+    await runTemplateCommand(path.join(nodePath, ".bin", "esbuild"), [
+      entry,
+      "--bundle",
+      "--format=iife",
+      "--minify",
+      "--platform=browser",
+      ...runtimeAliases(),
+      `--outfile=${output}`,
+    ], nodePath);
+
+    return await import("node:fs/promises").then((fs) => fs.readFile(output, "utf8"));
+  } finally {
+    await rm(dir, { force: true, recursive: true });
+  }
+}
+
+export async function compileTemplateAssets(
+  code: string,
+  customizations: TemplateCustomizationDefinition[] = [],
+  assetBase = "/assets",
+) {
+  validateTemplateCode(code);
+  const runtimeSource = await readFile(templateRuntimePath(), "utf8");
+  const [js, css] = await Promise.all([
+    compileTemplateBundle(code, customizations, assetBase),
+    compileTailwindForTemplate(code, [runtimeSource]),
+  ]);
+
+  return { js, css };
+}
+
+function customizationDefaults(
+  customizations: TemplateCustomizationDefinition[],
+) {
+  return Object.fromEntries(
+    customizations.flatMap((field) => {
+      const byId: [string, CustomizationValue] = [String(field.fieldId), field.defaultValue];
+      const name = field.name.trim();
+      return name
+        ? [byId, [name, field.defaultValue] as [string, CustomizationValue]]
+        : [byId];
+    }),
+  );
+}
+
+function runtimeAliases() {
+  return [
+    ...TEMPLATE_RUNTIME_IMPORTS.map(
+    (moduleName) => `--alias:${moduleName}=${templateRuntimePath()}`,
+    ),
+    `--alias:${SHADERS_RUNTIME_IMPORT}=${shadersRuntimePath()}`,
+  ];
+}
+
+function templateRuntimePath() {
+  return path.join(templatesPath, "templateRuntime.tsx");
+}
+
+function shadersRuntimePath() {
+  return path.join(templatesPath, "shadersRuntime.tsx");
+}
+
+function withRuntimeImports(code: string) {
+  return code.replace(/(["'])shaders\/react\1/g, `$1${SHADERS_RUNTIME_IMPORT}$1`);
+}
+
+async function runTemplateCommand(
+  command: string,
+  args: string[],
+  nodePath: string,
+) {
+  return run(command, args, {
+    env: {
+      ...process.env,
+      NODE_PATH: [nodePath, process.env.NODE_PATH].filter(Boolean).join(path.delimiter),
+    },
+    maxBuffer: TEMPLATE_COMPILE_MAX_BUFFER,
+    timeout: TEMPLATE_COMPILE_TIMEOUT_MS,
+  });
+}

package/templates/templateRuntime.tsx

@@ -0,0 +1,280 @@
+import React, {
+  type ComponentProps,
+  createContext,
+  useCallback,
+  useContext,
+  type ReactNode,
+} from "react";
+import {
+  DynamicIcon,
+  iconNames,
+  type IconName,
+} from "lucide-react/dynamic";
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import {
+  normalizeCustomizationValues,
+  type CustomizationValues,
+} from "../lib/customizations";
+
+export type { CustomizationValue, CustomizationValues } from "../lib/customizations";
+
+export type TemplateProps = {
+  customizations?: CustomizationValues | null;
+};
+
+type TemplateRuntimeContextValue = {
+  assetBase?: string;
+  dataApiBase?: string;
+  defaults: CustomizationValues;
+  projectId?: string;
+  values: CustomizationValues;
+};
+
+const TemplateRuntimeContext = createContext<TemplateRuntimeContextValue>({
+  defaults: {},
+  values: {},
+});
+let currentTemplateRuntime: TemplateRuntimeContextValue = {
+  defaults: {},
+  values: {},
+};
+
+export function TemplateRuntimeProvider({
+  children,
+  customizations,
+  defaults,
+}: {
+  children: ReactNode;
+  customizations?: CustomizationValues | null;
+  defaults?: CustomizationValues | null;
+}) {
+  const runtime = {
+    defaults: normalizeValues(defaults),
+    values: normalizeValues(customizations),
+  };
+
+  return (
+    <TemplateRuntimeContext.Provider value={runtime}>
+      {children}
+    </TemplateRuntimeContext.Provider>
+  );
+}
+
+export function configureTemplateRuntime(
+  customizations?: CustomizationValues | null,
+  defaults?: CustomizationValues | null,
+  project?: { assetBase?: string; dataApiBase?: string; projectId?: string },
+) {
+  currentTemplateRuntime = {
+    assetBase: project?.assetBase,
+    dataApiBase: project?.dataApiBase,
+    defaults: normalizeValues(defaults),
+    projectId: project?.projectId,
+    values: normalizeValues(customizations),
+  };
+}
+
+export function asset(path: string) {
+  const relativePath = path.replace(/^\/+/, "");
+  if (!relativePath || relativePath.split("/").includes("..")) {
+    throw new Error("asset() requires a relative path inside the template public folder");
+  }
+  const base = currentTemplateRuntime.assetBase?.replace(/\/$/, "") || "/assets";
+  return `${base}/${relativePath.split("/").map(encodeURIComponent).join("/")}`;
+}
+
+export type ProjectDataRecord<T extends Record<string, unknown> = Record<string, unknown>> = {
+  id: string;
+  data: T;
+};
+
+class ProjectDataRequestError extends Error {
+  constructor(message: string, readonly status: number) {
+    super(message);
+  }
+}
+
+export const db = {
+  async isAdmin(adminName: string) {
+    try {
+      await projectDataRequest("?admin=1", { adminName });
+      return true;
+    } catch (error) {
+      if (error instanceof ProjectDataRequestError && error.status === 401) return false;
+      throw error;
+    }
+  },
+  list<T extends Record<string, unknown> = Record<string, unknown>>(adminName?: string) {
+    return projectDataRequest<ProjectDataRecord<T>[]>(adminName ? "?admin=1" : "", { adminName });
+  },
+  create<T extends Record<string, unknown>>(data: T, adminName: string) {
+    return projectDataRequest<ProjectDataRecord<T>>("", { adminName, body: data, method: "POST" });
+  },
+  update<T extends Record<string, unknown>>(id: string | number, data: T, adminName: string) {
+    return projectDataRequest<ProjectDataRecord<T>>(`?id=${id}`, { adminName, body: data, method: "PATCH" });
+  },
+  remove(id: string | number, adminName: string) {
+    return projectDataRequest<void>(`?id=${id}`, { adminName, method: "DELETE" });
+  },
+  claim<T extends Record<string, unknown>>(id: string | number, data: T) {
+    return projectDataRequest<ProjectDataRecord<T>>(`?id=${id}`, { body: { claim: data }, method: "PATCH" });
+  },
+};
+
+async function projectDataRequest<T>(
+  path: string,
+  options: { adminName?: string; body?: Record<string, unknown>; method?: string },
+) {
+  const { dataApiBase, projectId } = currentTemplateRuntime;
+  if (!projectId) throw new Error("Database access is available inside projects only");
+
+  const response = await fetch(
+    `${(dataApiBase || "https://noweb.app").replace(/\/$/, "")}/api/project-data/${encodeURIComponent(projectId)}${path}`,
+    {
+      method: options.method || "GET",
+      headers: {
+        ...(options.body ? { "Content-Type": "application/json" } : {}),
+        ...(options.adminName ? { "X-Admin-Name": options.adminName } : {}),
+      },
+      body: options.body ? JSON.stringify(options.body) : undefined,
+    },
+  );
+  const result = response.status === 204 ? null : await response.json().catch(() => null);
+  if (!response.ok) {
+    throw new ProjectDataRequestError(result?.error || `Database request failed (${response.status})`, response.status);
+  }
+  return result as T;
+}
+
+export function custom<T = string>(fieldId: number): T {
+  if (arguments.length !== 1) {
+    throw new Error("custom() accepts exactly one argument");
+  }
+  const value = resolveCustomization(currentTemplateRuntime, fieldId);
+  return (value === undefined ? "" : value) as T;
+}
+
+export function useCustomization(fieldId: number): string {
+  const value = resolveCustomization(useContext(TemplateRuntimeContext), fieldId);
+  return typeof value === "string" ? value : "";
+}
+
+export function useCustomizations() {
+  const context = useContext(TemplateRuntimeContext);
+  return useCallback(
+    (fieldId: number) => {
+      const value = resolveCustomization(context, fieldId);
+      return typeof value === "string" ? value : "";
+    },
+    [context],
+  );
+}
+
+export function CustomIcon({
+  fieldId,
+  fallbackName = "circle",
+  ...props
+}: Omit<ComponentProps<typeof DynamicIcon>, "name"> & {
+  fieldId: number;
+  fallbackName?: IconName;
+}) {
+  const value = useCustomization(fieldId);
+  const name = iconNames.includes(value as IconName) ? value as IconName : fallbackName;
+  return <DynamicIcon name={name} {...props} />;
+}
+
+export function Markdown({ text = "" }: { text?: string }) {
+  return (
+    <span className="mt-10 block space-y-4 text-base leading-7">
+      <ReactMarkdown components={markdownComponents} remarkPlugins={[remarkGfm]}>
+        {text}
+      </ReactMarkdown>
+    </span>
+  );
+}
+
+export function markdown(text = "") {
+  return <Markdown text={text} />;
+}
+
+const SKILL_ICON_ALIASES: Record<string, string> = {
+  ae: "aftereffects", ai: "illustrator", amazonwebservices: "aws", au: "audition",
+  bots: "discordbots", cf: "cloudflare", express: "expressjs", gatsbyjs: "gatsby",
+  ghactions: "githubactions", go: "golang", googlecloud: "gcp", gql: "graphql",
+  js: "javascript", k8s: "kubernetes", ktorio: "ktor", md: "markdown",
+  mongo: "mongodb", mui: "materialui", nest: "nestjs", net: "dotnet",
+  next: "nextjs", nuxt: "nuxtjs", postgres: "postgresql", pr: "premiere",
+  ps: "photoshop", pwsh: "powershell", py: "python", rollup: "rollupjs",
+  rxjava: "reactivex", rxjs: "reactivex", sc: "scala", scss: "sass",
+  sklearn: "scikitlearn", tailwind: "tailwindcss", ts: "typescript",
+  unreal: "unrealengine", vlang: "v", vue: "vuejs", wasm: "webassembly",
+  windi: "windicss",
+};
+
+const LIGHT_SKILL_ICONS = new Set(`ableton activitypub actix aiscript alpinejs anaconda androidstudio angular apple arch autocad aws azure bash bevy bitbucket blender bsd bun cassandra clion clojure cloudflare cmake codepen coffeescript crystal cypress d3 dart debian deno devto discordjs dynamodb eclipse elasticsearch elixir elysia emotion expressjs fediverse figma firebase flask flutter gcp gherkin github githubactions gitlab gmail godot gradle grafana graphql gtk haskell haxe haxeflixel hibernate htmx idea ipfs java jenkins julia kali kotlin ktor laravel latex less linux lit lua markdown mastodon materialui matlab maven mint misskey mysql neovim nestjs netlify nextjs nim nix nodejs notion npm nuxtjs obsidian octave opencv openstack php phpstorm pinia pkl plan9 planetscale pnpm postgresql powershell processing pug pycharm python pytorch qt r rabbitmq raspberrypi react reactivex redhat redis regex remix replit rider rollupjs ros scala scikitlearn sequelize sketchup solidjs spotify spring stackoverflow sublime supabase svg symfony tailwindcss tauri tensorflow terraform threejs ubuntu unity v vercel vim visualstudio vite vitest vscode vscodium vuejs vuetify webpack webstorm windicss windows workers yarn yew zig`.split(" "));
+
+export function skillIcon(name: string, theme: "dark" | "light" = "dark") {
+  const key = name.trim().toLowerCase();
+  const icon = SKILL_ICON_ALIASES[key] ?? key;
+  if (!/^[a-z0-9]+$/.test(icon)) return "";
+  const variant = theme === "light" && LIGHT_SKILL_ICONS.has(icon) ? "-light" : "";
+  return `https://storage.noweb.app/noweb/skillIcons/${icon}${variant}.svg`;
+}
+
+const markdownComponents: Components = {
+  a({ children, href }) {
+    return (
+      <a className="font-semibold" href={href}>
+        {children}
+      </a>
+    );
+  },
+  blockquote({ children }) {
+    return <span className="block border-l-2 pl-4 italic">{children}</span>;
+  },
+  code({ children }) {
+    return <code className="rounded-md px-1.5 py-0.5 font-mono text-sm">{children}</code>;
+  },
+  h1({ children }) {
+    return <span className="block pt-4 text-3xl leading-tight font-medium tracking-tight">{children}</span>;
+  },
+  h2({ children }) {
+    return <span className="block pt-3 text-xl font-medium">{children}</span>;
+  },
+  h3({ children }) {
+    return <span className="block pt-2 text-lg font-medium">{children}</span>;
+  },
+  li({ children }) {
+    return <span className="block">{children}</span>;
+  },
+  ol({ children }) {
+    return <span className="block list-decimal space-y-2 pl-5">{children}</span>;
+  },
+  p({ children }) {
+    return <span className="block">{children}</span>;
+  },
+  pre({ children }) {
+    return <span className="block overflow-x-auto rounded-2xl p-4 font-mono text-sm text-slate-100">{children}</span>;
+  },
+  strong({ children }) {
+    return <strong className="font-bold">{children}</strong>;
+  },
+  ul({ children }) {
+    return <span className="block list-disc space-y-2 pl-5">{children}</span>;
+  },
+};
+
+function resolveCustomization(
+  context: TemplateRuntimeContextValue,
+  fieldId: number,
+) {
+  const key = String(fieldId);
+  return Object.hasOwn(context.values, key)
+    ? context.values[key]
+    : context.defaults[key];
+}
+
+function normalizeValues(value: unknown): CustomizationValues {
+  return normalizeCustomizationValues(value) ?? {};
+}

package/templates/validateTemplateCode.ts

@@ -0,0 +1,121 @@
+import ts from "typescript";
+
+export const TEMPLATE_CODE_MAX_BYTES = 250_000;
+
+const ALLOWED_TEMPLATE_IMPORTS = new Set([
+  "@noweb",
+  "@react-three/drei",
+  "@react-three/fiber",
+  "@react-three/rapier",
+  "clsx",
+  "gsap",
+  "gsap/all",
+  "gsap/ScrollTrigger",
+  "lucide-react",
+  "motion/react",
+  "noweb",
+  "ogl",
+  "react",
+  "react-dom",
+  "react-dom/client",
+  "react-markdown",
+  "remark-gfm",
+  "shaders/react",
+  "three",
+  "three/examples/jsm/controls/OrbitControls.js",
+  "three/examples/jsm/loaders/GLTFLoader.js",
+]);
+
+const BLOCKED_JSX_ELEMENTS = new Set(["form", "iframe", "script"]);
+const BLOCKED_NETWORK_APIS = new Set([
+  "EventSource",
+  "WebSocket",
+  "XMLHttpRequest",
+  "fetch",
+  "sendBeacon",
+]);
+
+export function validateTemplateCode(code: string) {
+  const size = Buffer.byteLength(code, "utf8");
+  if (size > TEMPLATE_CODE_MAX_BYTES) {
+    throw new Error(`Template code must be ${TEMPLATE_CODE_MAX_BYTES} bytes or smaller.`);
+  }
+
+  const source = ts.createSourceFile(
+    "template.tsx",
+    code,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX,
+  );
+
+  for (const statement of source.statements) {
+    if (!ts.isImportDeclaration(statement)) continue;
+    const specifier = statement.moduleSpecifier;
+    if (!ts.isStringLiteral(specifier)) continue;
+
+    const moduleName = specifier.text;
+    if (!ALLOWED_TEMPLATE_IMPORTS.has(moduleName)) {
+      throw new Error(`Template import is not allowed: ${moduleName}`);
+    }
+  }
+
+
+  function inspect(node: ts.Node) {
+    if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+      const tagName = node.tagName.getText(source).toLowerCase();
+      if (BLOCKED_JSX_ELEMENTS.has(tagName)) {
+        throw new Error(`Template element is not allowed: <${tagName}>`);
+      }
+
+      for (const attribute of node.attributes.properties) {
+        if (
+          ts.isJsxAttribute(attribute) &&
+          attribute.name.getText(source) === "dangerouslySetInnerHTML"
+        ) {
+          throw new Error("dangerouslySetInnerHTML is not allowed in templates");
+        }
+      }
+    }
+
+    if (ts.isIdentifier(node) && BLOCKED_NETWORK_APIS.has(node.text)) {
+      throw new Error(`Template network API is not allowed: ${node.text}`);
+    }
+
+    if (
+      ts.isCallExpression(node) &&
+      ts.isIdentifier(node.expression) &&
+      node.expression.text === "custom" &&
+      node.arguments.length !== 1
+    ) {
+      throw new Error("custom() accepts exactly one argument");
+    }
+
+    if (
+      ts.isElementAccessExpression(node) &&
+      ts.isStringLiteralLike(node.argumentExpression) &&
+      BLOCKED_NETWORK_APIS.has(node.argumentExpression.text)
+    ) {
+      throw new Error(`Template network API is not allowed: ${node.argumentExpression.text}`);
+    }
+
+    if (
+      ts.isCallExpression(node) &&
+      ts.isPropertyAccessExpression(node.expression) &&
+      node.expression.name.text === "createElement" &&
+      (!node.arguments[0] ||
+        !ts.isStringLiteralLike(node.arguments[0]) ||
+        BLOCKED_JSX_ELEMENTS.has(node.arguments[0].text.toLowerCase()))
+    ) {
+      throw new Error("Dynamic or blocked element creation is not allowed");
+    }
+
+    ts.forEachChild(node, inspect);
+  }
+
+  inspect(source);
+
+  if (/\@import\s+(?:url\()?\s*["']?https?:\/\//i.test(code)) {
+    throw new Error("Remote CSS imports are not allowed in templates");
+  }
+}

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "allowImportingTsExtensions": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"],
+      "@noweb": ["./templates/templateRuntime.tsx"],
+      "noweb": ["./templates/templateRuntime.tsx"],
+      "@noweb/template-runtime": ["./templates/templateRuntime.tsx"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}