sinho 0.1.0

package/web/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "site",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "prepare-static": "copyfiles --flat ../dist/bundle.min.js ../dist/bundle.d.ts ./static/dist",
+    "start": "npm run prepare-static && docusaurus start",
+    "build": "npm run prepare-static && docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@docusaurus/core": "3.2.1",
+    "@docusaurus/preset-classic": "3.2.1",
+    "@mdx-js/react": "^3.0.0",
+    "@swc/wasm-web": "^1.4.17",
+    "clsx": "^2.0.0",
+    "monaco-editor": "^0.48.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "sinho": "file:.."
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "3.2.1",
+    "@docusaurus/tsconfig": "3.2.1",
+    "@docusaurus/types": "3.2.1",
+    "docusaurus-plugin-typedoc-api": "^4.2.0",
+    "typedoc": "^0.25.13",
+    "typescript": "^5.4.3"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0"
+  }
+}

package/web/sidebars.ts

@@ -0,0 +1,31 @@
+import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
+
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+const sidebars: SidebarsConfig = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    'intro',
+    'hello',
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['tutorial-basics/create-a-document'],
+    },
+  ],
+   */
+};
+
+export default sidebars;

package/web/src/components/monacoEditor.tsx

@@ -0,0 +1,72 @@
+import { useColorMode } from "@docusaurus/theme-common";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import * as monaco from "monaco-editor";
+import { CSSProperties, FC, useEffect, useRef } from "react";
+
+export const MonacoEditor: FC<{
+  style?: CSSProperties;
+  text?: string;
+  onChange?: (text: string) => void;
+}> = (props) => {
+  const divRef = useRef<HTMLDivElement>(null);
+  const typesPath = useBaseUrl("/dist/bundle.d.ts");
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
+  const { colorMode } = useColorMode();
+
+  useEffect(() => {
+    (async () => {
+      editorRef.current = monaco.editor.create(divRef.current!, {
+        model: monaco.editor.createModel(
+          props.text!,
+          "typescript",
+          monaco.Uri.file("/main.tsx"),
+        ),
+        language: "typescript",
+        minimap: {
+          enabled: false,
+        },
+        smoothScrolling: true,
+        automaticLayout: true,
+      });
+
+      editorRef.current.onDidChangeModelContent(() => {
+        props.onChange?.(editorRef.current!.getValue());
+      });
+
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+        strict: true,
+        jsx: monaco.languages.typescript.JsxEmit.ReactJSX,
+        jsxImportSource: "sinho",
+      });
+
+      const types = await fetch(typesPath).then((res) => res.text());
+
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(
+        `declare module "sinho" {\n${types}\n}`,
+        "ts:sinho.d.ts",
+      );
+
+      monaco.languages.typescript.typescriptDefaults.addExtraLib(
+        `declare module "sinho/jsx-runtime" {\n${types}\n}`,
+        "ts:sinho-jsx-runtime.d.ts",
+      );
+    })();
+
+    return () => {
+      editorRef.current?.getModel()!.dispose();
+      editorRef.current?.dispose();
+    };
+  }, []);
+
+  useEffect(() => {
+    monaco.editor.setTheme(colorMode == "light" ? "vs" : "vs-dark");
+  }, [colorMode]);
+
+  useEffect(() => {
+    if (editorRef.current?.getValue() != props.text) {
+      editorRef.current?.setValue(props.text!);
+    }
+  }, [props.text]);
+
+  return <div ref={divRef} style={props.style} />;
+};

package/web/src/components/playground.tsx

@@ -0,0 +1,89 @@
+import { useColorMode } from "@docusaurus/theme-common";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import {
+  CSSProperties,
+  FC,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+export const Playground: FC<{
+  innerRef?: RefObject<HTMLElement>;
+  style?: CSSProperties;
+  headerText?: string;
+  customCode?: string;
+  autosize?: boolean;
+}> = (props) => {
+  const { colorMode } = useColorMode();
+  const sinhoPath = useBaseUrl("/dist/bundle.min.js");
+  const importMap = {
+    imports: {
+      sinho: sinhoPath,
+      "sinho/jsx-runtime": sinhoPath,
+    },
+  };
+
+  useEffect(() => {
+    import("./playgroundComponent");
+  }, []);
+
+  const Playground: any = "x-playground";
+
+  return (
+    <Playground
+      ref={props.innerRef}
+      style={props.style}
+      color-mode={colorMode}
+      header-text={props.headerText}
+      autosize={props.autosize}
+      import-map={JSON.stringify(importMap)}
+      custom-code={props.customCode}
+    />
+  );
+};
+
+export const CodeSnippetPlayground: FC<{
+  headerText?: string;
+  customCode?: (code: string) => string;
+}> = (props) => {
+  const [customCode, setCustomCode] = useState("");
+  const playgroundRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (playgroundRef.current == null) return;
+
+    const codeElement = playgroundRef.current
+      .previousElementSibling as HTMLElement | null;
+    const detectedCode = codeElement?.innerText ?? "";
+
+    setCustomCode(props.customCode?.(detectedCode) ?? detectedCode);
+  }, [props.customCode]);
+
+  return (
+    <Playground
+      innerRef={playgroundRef}
+      autosize
+      headerText={props.headerText}
+      customCode={customCode}
+    />
+  );
+};
+
+export const CodeSnippetComponentPlayground: FC<{
+  headerText?: string;
+  componentName: string;
+}> = (props) => {
+  return (
+    <CodeSnippetPlayground
+      headerText={props.headerText}
+      customCode={(code) =>
+        `${code}
+        import { defineComponents } from "sinho";
+        defineComponents(${props.componentName});
+        document.body.append(new ${props.componentName}());`
+      }
+    />
+  );
+};

package/web/src/components/playgroundComponent.tsx

@@ -0,0 +1,168 @@
+/** @jsxImportSource sinho */
+
+import {
+  Component,
+  prop,
+  Style,
+  css,
+  defineComponents,
+  useSignal,
+  useEffect,
+  MaybeSignal,
+} from "sinho";
+
+export class Playground extends Component("x-playground", {
+  colorMode: prop<"light" | "dark">("light", {
+    attribute: (value) => (value === "dark" ? value : "light"),
+  }),
+  headerText: prop<string>("Preview", {
+    attribute: String,
+  }),
+  importMap: prop<{ imports: Record<string, string> }>(
+    { imports: {} },
+    { attribute: JSON.parse },
+  ),
+  customCode: prop<string>("", {
+    attribute: String,
+  }),
+  autosize: prop<boolean>(false, {
+    attribute: () => true,
+  }),
+}) {
+  render() {
+    const [src, setSrc] = useSignal(
+      "document.body.innerHTML = '<p>Loading…</p>';",
+    );
+    const [error, setError] = useSignal<Error>();
+
+    useEffect(() => {
+      setError(undefined);
+      const customCode = this.props.customCode();
+
+      (async () => {
+        try {
+          const swc = await import("@swc/wasm-web");
+          await swc.default();
+
+          const { code } = swc.transformSync(customCode, {
+            jsc: {
+              target: "es2022",
+              parser: {
+                syntax: "typescript",
+                tsx: true,
+              },
+              transform: {
+                react: {
+                  runtime: "automatic",
+                  importSource: "sinho",
+                },
+              },
+            },
+          });
+
+          setSrc(code);
+        } catch (err) {
+          setError(new Error((err as string).replace(/\x1B\[.*?m/g, "")));
+        }
+      })();
+    });
+
+    const iframeCss = css`
+      @import url("https://rsms.me/inter/inter.css");
+
+      body {
+        background: ${() =>
+          this.props.colorMode() == "light" ? "#f6f8fa" : "#282a36"};
+        color: ${() =>
+          this.props.colorMode() == "light" ? "#1c1e21" : "#e3e3e3"};
+        font-family: "Inter", sans-serif;
+        margin: 0;
+        padding: 0.5em 1em;
+        overflow: ${() => (this.props.autosize() ? "hidden" : "auto")};
+      }
+    `;
+
+    const jsBlob = () =>
+      new Blob(
+        [
+          error() == null
+            ? src()
+            : `\
+              document.body.innerHTML = '<p>Error loading preview:</p><pre id="error"></pre>';
+              document.getElementById("error").innerText = ${JSON.stringify(
+                error()!.message,
+              )};`,
+        ],
+        { type: "application/javascript" },
+      );
+
+    const htmlBlob = () =>
+      new Blob(
+        [
+          `<!DOCTYPE html>
+          <html>
+          <head>
+          <base href="${location.href}" />
+          <script type="importmap">${JSON.stringify(this.props.importMap())}</script>
+          <style>${MaybeSignal.get(iframeCss)}</style>
+          <script type="module" src="${URL.createObjectURL(jsBlob())}"></script>
+          </head>
+          <body>
+          </body>
+          </html>`,
+        ],
+        { type: "text/html" },
+      );
+
+    return (
+      <>
+        <div class="header">{this.props.headerText}</div>
+
+        <iframe
+          src={() => URL.createObjectURL(htmlBlob())}
+          onload={(evt) => {
+            if (!this.props.autosize()) return;
+
+            const bodySize =
+              evt.currentTarget.contentWindow!.document.body.getBoundingClientRect();
+
+            evt.currentTarget.height = bodySize.height.toString();
+          }}
+        />
+
+        <Style>{css`
+          :host {
+            display: flex;
+            flex-direction: column;
+            position: relative;
+            margin-bottom: var(--ifm-leading);
+          }
+
+          .header {
+            border-bottom: 1px solid var(--ifm-color-emphasis-300);
+            font-size: var(--ifm-code-font-size);
+            font-weight: 500;
+            padding: 0.75rem var(--ifm-pre-padding);
+            border-top-left-radius: var(--ifm-code-border-radius);
+            border-top-right-radius: var(--ifm-code-border-radius);
+            background: ${() =>
+              this.props.colorMode() == "light" ? "#f6f8fa" : "#282a36"};
+          }
+
+          iframe {
+            flex: ${this.props.autosize() ? "auto" : "1"};
+            display: block;
+            border: none;
+            width: 100%;
+          }
+        `}</Style>
+      </>
+    );
+  }
+}
+
+try {
+  defineComponents(Playground);
+} catch (err) {
+  console.error(err);
+}

package/web/src/css/custom.css

@@ -0,0 +1,37 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-font-family-base: Inter, sans-serif;
+  font-feature-settings:
+    "liga" 1,
+    "calt" 1; /* fix for Chrome */
+
+  --ifm-color-primary-darkest: #93160f;
+  --ifm-color-primary-darker: #c2221a;
+  --ifm-color-primary-dark: #e24627;
+  --ifm-color-primary: #f06533;
+  --ifm-color-primary-light: #ef9540;
+  --ifm-color-primary-lighter: #ffb655;
+  --ifm-color-primary-lightest: #ffcf6f;
+  --ifm-code-font-size: 90%;
+  --docusaurus-highlighted-code-line-bg: rgba(255, 207, 111, 0.2);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+  --docusaurus-highlighted-code-line-bg: rgba(255, 207, 111, 0.1);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  letter-spacing: -0.02em;
+}

package/web/src/pages/index.module.css

@@ -0,0 +1,31 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .7em;
+}
+
+main {
+  margin: 1.5em auto;
+  display: inline-block;
+  max-width: 100%;
+  padding: 0 var(--ifm-spacing-horizontal);
+}

package/web/src/pages/index.tsx

@@ -0,0 +1,73 @@
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import Heading from "@theme/Heading";
+
+import { CodeSnippetComponentPlayground } from "../components/playground";
+import styles from "./index.module.css";
+import CodeBlock from "@theme/CodeBlock";
+
+function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx("hero", styles.heroBanner)}>
+      <div className="container">
+        <Heading as="h1" className="hero__title">
+          {siteConfig.title}
+        </Heading>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--primary button--lg"
+            to="/docs/installation"
+          >
+            Documentation
+          </Link>
+          <Link className="button button--secondary button--lg" to="/api">
+            API
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home(): JSX.Element {
+  return (
+    <Layout description="A lightweight signal-based library for building web components with a React-like API.">
+      <HomepageHeader />
+      <main>
+        <ul>
+          <li>🌌 Web standards with custom HTML elements</li>
+          <li>⚛️ React-like API</li>
+          <li>✒️ Declarative templating with JSX (no additional parsing)</li>
+          <li>🚥 Fine-grained reactivity with signals</li>
+          <li>🛟 Type-safe components out of the box with TypeScript</li>
+          <li>🪶 Lightweight (~4KB minified and compressed)</li>
+        </ul>
+
+        <CodeBlock language="tsx">{`\
+import { Component, useSignal } from "sinho";
+
+class Counter extends Component("x-counter") {
+  render() {
+    const [value, setValue] = useSignal(0);
+
+    return (
+      <>
+        <p>Counter: {value}</p>
+        <p>
+          <button onclick={() => setValue((n) => n + 1)}>Increment</button>{" "}
+          <button onclick={() => setValue((n) => n - 1)}>Decrement</button>
+        </p>
+      </>
+    );
+  }
+}`}</CodeBlock>
+
+        <CodeSnippetComponentPlayground componentName="Counter" />
+      </main>
+    </Layout>
+  );
+}

package/web/src/pages/playground.tsx

@@ -0,0 +1,64 @@
+import Layout from "@theme/Layout";
+import { Playground } from "../components/playground";
+import { useState } from "react";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+
+export default function PlaygroundPage() {
+  const [src, setSrc] = useState(`\
+import { Component, useSignal, defineComponents } from "sinho";
+
+class Counter extends Component("x-counter") {
+  render() {
+    const [value, setValue] = useSignal(0);
+
+    return (
+      <>
+        <p>Counter: {value}</p>
+        <p>
+          <button onclick={() => setValue((n) => n + 1)}>Increment</button>{" "}
+          <button onclick={() => setValue((n) => n - 1)}>Decrement</button>
+        </p>
+      </>
+    );
+  }
+}
+
+defineComponents(Counter);
+document.body.append(new Counter());`);
+
+  return (
+    <Layout
+      title="Playground"
+      description="A lightweight signal-based library for building web components with a React-like API."
+      noFooter
+    >
+      <div
+        style={{
+          alignSelf: "stretch",
+          flex: 1,
+          display: "flex",
+          alignItems: "stretch",
+        }}
+      >
+        <BrowserOnly>
+          {() => {
+            const { MonacoEditor } =
+              require("../components/monacoEditor") as typeof import("../components/monacoEditor");
+
+            return (
+              <MonacoEditor
+                style={{ flex: 1, overflow: "hidden" }}
+                text={src}
+                onChange={(src) => setSrc(src)}
+              />
+            );
+          }}
+        </BrowserOnly>
+        <Playground
+          style={{ flex: 1, marginBottom: 0, overflow: "hidden" }}
+          customCode={src}
+        />
+      </div>
+    </Layout>
+  );
+}