Bring examples into solid-docs (as individual files)

langs/en/examples-src/$descriptor.json

@@ -0,0 +1,14 @@
+[
+  "counter",
+  "todos",
+  "forms",
+  "cssanimations",
+  "context",
+  "clock",
+  "ethasketch",
+  "scoreboard",
+  "asyncresource",
+  "suspensetabs",
+  "simpletodos",
+  "simpletodoshyperscript"
+]

langs/en/examples-src/README.md

@@ -0,0 +1,26 @@
+# README of /examples-src/
+
+This folder contains all the existing examples.
+
+
+## Creating an example
+
+1. add a new folder like `/examples-src/new-example` (`new-example` is later used as the example ID)
+2. fill the `/examples-src/new-example` folder with all the files of the new example
+3. add an `/examples-src/new-example/$descriptor.json` file with meaningful data (see existing examples)
+
+NOTE: only the files included in the `$descriptor.files` list will be published
+
+
+## Publishing an example
+
+1. add the example ID to the `/examples-src/$descriptor.json` file
+
+NOTE: only the examples included in the `$descriptor` list will be published
+
+
+## Rollup
+
+The `generate-json-folders` (rollup plugin) creates a bunch of JSON files based on the structure of the `examples-src` tree and its `$descriptor` files.
+
+Just run `$ yarn build` to see the result in `/examples/`.

langs/en/examples-src/asyncresource/$descriptor.json

@@ -0,0 +1,5 @@
+{
+  "name": "Complex/Async Resource",
+  "description": "Ajax requests to SWAPI with Promise cancellation",
+  "files": ["main.jsx"]
+}

langs/en/examples-src/asyncresource/main.jsx

@@ -0,0 +1,27 @@
+import { createSignal, createResource } from "solid-js";
+import { render } from "solid-js/web";
+
+const fetchUser = async (id) =>
+  (await fetch(`https://swapi.dev/api/people/${id}/`)).json();
+
+const App = () => {
+  const [userId, setUserId] = createSignal();
+  const [user] = createResource(userId, fetchUser);
+
+  return (
+    <>
+      <input
+        type="number"
+        min="1"
+        placeholder="Enter Numeric Id"
+        onInput={(e) => setUserId(e.currentTarget.value)}
+      />
+      <span>{user.loading && "Loading..."}</span>
+      <div>
+        <pre>{JSON.stringify(user(), null, 2)}</pre>
+      </div>
+    </>
+  );
+};
+
+render(App, document.getElementById("app"));

langs/en/examples-src/clock/$descriptor.json

@@ -0,0 +1,5 @@
+{
+  "name": "Complex/Clock",
+  "description": "Demonstrates Solid reactivity with a real-time clock example",
+  "files": ["main.tsx","Clock.tsx","Lines.tsx","Hand.tsx","utils.tsx","styles.css"]
+}

langs/en/examples-src/clock/Clock.tsx

@@ -0,0 +1,51 @@
+import { createSignal, onCleanup } from 'solid-js';
+import { Hand } from './Hand';
+import { Lines } from './Lines';
+import { createAnimationLoop } from './utils';
+import type { Accessor, Component } from 'solid-js';
+
+const getSecondsSinceMidnight = (): number => (Date.now() - new Date().setHours(0, 0, 0, 0)) / 1000;
+
+type ClockFaceProps = {
+  hour: string;
+  minute: string;
+  second: string;
+  subsecond: string;
+};
+
+export const ClockFace: Component<ClockFaceProps> = (props) => (
+  <svg viewBox="0 0 200 200" width="95vh">
+    <g transform="translate(100, 100)">
+      {/* static */}
+      <circle class="text-neutral-900" r="99" fill="white" stroke="currentColor" />
+      <Lines numberOfLines={60} class="subsecond" length={2} width={1} />
+      <Lines numberOfLines={12} class="hour" length={5} width={2} />
+      {/* dynamic */}
+      <Hand rotate={props.subsecond} class="subsecond" length={85} width={5} />
+      <Hand rotate={props.hour} class="hour" length={50} width={4} />
+      <Hand rotate={props.minute} class="minute" length={70} width={3} />
+      <Hand rotate={props.second} class="second" length={80} width={2} />
+    </g>
+  </svg>
+);
+
+export const Clock: Component = () => {
+  const [time, setTime] = createSignal<number>(getSecondsSinceMidnight());
+  const dispose = createAnimationLoop(() => {
+    setTime(getSecondsSinceMidnight());
+  });
+  onCleanup(dispose);
+
+  const rotate = (rotate: number, fixed: number = 1) => `rotate(${(rotate * 360).toFixed(fixed)})`;
+
+  const subsecond = () => rotate(time() % 1);
+  const second = () => rotate((time() % 60) / 60);
+  const minute = () => rotate(((time() / 60) % 60) / 60);
+  const hour = () => rotate(((time() / 60 / 60) % 12) / 12);
+
+  return (
+    <div class="clock">
+      <ClockFace hour={hour()} minute={minute()} second={second()} subsecond={subsecond()} />
+    </div>
+  );
+};

langs/en/examples-src/clock/Hand.tsx

@@ -0,0 +1,18 @@
+import { Component, splitProps } from 'solid-js';
+
+type HandProps = { rotate: string; class: string; length: number; width: number; fixed?: boolean };
+
+export const Hand: Component<HandProps> = (props) => {
+  const [local, rest] = splitProps(props, ['rotate', 'length', 'width', 'fixed']);
+  return (
+    <line
+      y1={local.fixed ? local.length - 95 : undefined}
+      y2={-(local.fixed ? 95 : local.length)}
+      stroke="currentColor"
+      stroke-width={local.width}
+      stroke-linecap="round"
+      transform={local.rotate}
+      {...rest}
+    />
+  );
+};

langs/en/examples-src/clock/Lines.tsx

@@ -0,0 +1,21 @@
+import { Hand } from './Hand';
+import { Component, splitProps, For } from 'solid-js';
+
+type LinesProps = {
+  numberOfLines: number;
+  class: string;
+  length: number;
+  width: number;
+};
+
+const rotate = (index: number, length: number) => `rotate(${(360 * index) / length})`;
+
+export const Lines: Component<LinesProps> = (props) => {
+  const [local, rest] = splitProps(props, ['numberOfLines']);
+
+  return (
+    <For each={new Array(local.numberOfLines)}>
+      {(_, index) => <Hand rotate={rotate(index(), local.numberOfLines)} {...rest} fixed={true} />}
+    </For>
+  );
+};

langs/en/examples-src/clock/main.tsx

@@ -0,0 +1,5 @@
+import { render } from 'solid-js/web';
+import { Clock } from './Clock';
+import './styles.css';
+
+render(() => <Clock />, document.getElementById('app')!);

langs/en/examples-src/clock/styles.css

@@ -0,0 +1,20 @@
+.clock {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  height: 100vh;
+}
+
+.subsecond {
+  color: silver;
+}
+
+.hour,
+.minute {
+  color: black;
+}
+
+.second {
+  color: tomato;
+}

langs/en/examples-src/clock/utils.tsx

@@ -0,0 +1,48 @@
+// ported from voby https://github.com/vobyjs/voby/blob/master/src/hooks/use_scheduler.ts
+import { Accessor } from 'solid-js';
+
+type FN<Arguments extends unknown[], Return extends unknown = void> = (
+  ...args: Arguments
+) => Return;
+type MaybeAccessor<T = unknown> = Accessor<T> | T;
+const isFunction = (value: unknown): value is (...args: unknown[]) => unknown =>
+  typeof value === 'function';
+const unwrap = <T,>(maybeValue: MaybeAccessor<T>): T =>
+  isFunction(maybeValue) ? maybeValue() : maybeValue;
+
+export const createScheduler = <T, U>({
+  loop,
+  callback,
+  cancel,
+  schedule,
+}: {
+  loop?: MaybeAccessor<boolean>;
+  callback: MaybeAccessor<FN<[U]>>;
+  cancel: FN<[T]>;
+  schedule: (callback: FN<[U]>) => T;
+}): (() => void) => {
+  let tickId: T;
+  const work = (): void => {
+    if (unwrap(loop)) tick();
+    unwrap(callback);
+  };
+
+  const tick = (): void => {
+    tickId = schedule(work);
+  };
+
+  const dispose = (): void => {
+    cancel(tickId);
+  };
+
+  tick();
+  return dispose;
+};
+
+export const createAnimationLoop = (callback: FrameRequestCallback) =>
+  createScheduler({
+    callback,
+    loop: true,
+    cancel: cancelAnimationFrame,
+    schedule: requestAnimationFrame,
+  });

langs/en/examples-src/context/$descriptor.json

@@ -0,0 +1,5 @@
+{
+  "name": "Basic/Context",
+  "description": "A simple color picker using Context",
+  "files": ["main.tsx","theme.tsx"]
+}

langs/en/examples-src/context/main.tsx

@@ -0,0 +1,34 @@
+import { render } from "solid-js/web";
+import { ThemeProvider, useTheme } from "./theme";
+
+function App() {
+  const [theme, { changeColor }] = useTheme();
+
+  return (
+    <>
+      <h1
+        style={{
+          color: theme.color,
+        }}
+      >
+        {theme.title}
+      </h1>
+      <input
+        type="color"
+        name="color"
+        value={theme.color}
+        onInput={(e) => changeColor(e.currentTarget.value)}
+      />
+      <label for="color">Change color theme</label>
+    </>
+  );
+}
+
+render(
+  () => (
+    <ThemeProvider color="#335d92" title="Context Example">
+      <App />
+    </ThemeProvider>
+  ),
+  document.getElementById("app")!
+);

langs/en/examples-src/context/theme.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext, ParentComponent } from "solid-js";
+import { createStore } from "solid-js/store";
+
+export type ThemeContextState = {
+  readonly color: string;
+  readonly title: string;
+};
+export type ThemeContextValue = [
+  state: ThemeContextState,
+  actions: {
+    changeColor: (color: string) => void;
+    changeTitle: (title: string) => void;
+  }
+];
+
+const defaultState = {
+  color: "#66e6ac",
+  title: "Fallback Title",
+};
+
+const ThemeContext = createContext<ThemeContextValue>([
+  defaultState,
+  {
+    changeColor: () => undefined,
+    changeTitle: () => undefined,
+  },
+]);
+
+export const ThemeProvider: ParentComponent<{
+  color?: string;
+  title?: string;
+}> = (props) => {
+  const [state, setState] = createStore({
+    color: props.color ?? defaultState.color,
+    title: props.title ?? defaultState.title,
+  });
+
+  const changeColor = (color: string) => setState("color", color);
+  const changeTitle = (title: string) => setState("title", title);
+
+  return (
+    <ThemeContext.Provider value={[state, { changeColor, changeTitle }]}>
+      {props.children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => useContext(ThemeContext);

langs/en/examples-src/counter/$descriptor.json

@@ -0,0 +1,5 @@
+{
+  "name": "Basic/Counter",
+  "description": "A simple standard counter example",
+  "files": ["main.jsx"]
+}

langs/en/examples-src/counter/main.jsx

@@ -0,0 +1,14 @@
+import { createSignal, onCleanup } from "solid-js";
+import { render } from "solid-js/web";
+
+const CountingComponent = () => {
+	const [count, setCount] = createSignal(0);
+	const interval = setInterval(
+		() => setCount(c => c + 1),
+		1000
+	);
+	onCleanup(() => clearInterval(interval));
+	return <div>Count value is {count()}</div>;
+};
+
+render(() => <CountingComponent />, document.getElementById("app"));

langs/en/examples-src/counterstore/$descriptor.json

@@ -0,0 +1,3 @@
+{
+  "files": ["main.jsx","CounterStore.jsx"]
+}