vsx

├── .gitignore ├── README.md ├── .prettierrc ├── public ├── robots.txt ├── favicon.ico ├── index.html ├── logo.svg ├── logo-turbulence.svg ├── logo-blob.svg └── logo-x-static.svg ├── netlify.toml ├── src ├── types │ ├── global.ts │ └── jsx.d.ts ├── site.tsx ├── contents │ ├── current-state.tsx │ ├── intro.tsx │ ├── defer.ts │ ├── index.tsx │ ├── goals.tsx │ ├── tokens.tsx │ └── example.tsx ├── index.tsx ├── unbound.tsx ├── context.ts ├── h.ts ├── template.ts └── index.css ├── Dockerfile ├── scripts ├── jsdom.js └── prerender.js ├── snowpack.config.js ├── package.json ├── CODE-OF-CONDUCT.md ├── tsconfig.json ├── LICENCE └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .snowpack 2 | build 3 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [virtualstate.dev](https://virtualstate.dev) 2 | 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } 5 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/virtualstate/virtualstate.dev/main/public/favicon.ico -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | base = "/" 3 | publish = "/build/" 4 | 5 | [[redirects]] 6 | from = "/*" 7 | to = "/" 8 | -------------------------------------------------------------------------------- /src/types/global.ts: -------------------------------------------------------------------------------- 1 | declare global { 2 | 3 | interface Window { 4 | proposalSiteRender?: Promise; 5 | } 6 | 7 | } 8 | 9 | export {}; 10 | -------------------------------------------------------------------------------- /src/site.tsx: -------------------------------------------------------------------------------- 1 | import { h } from "./h"; 2 | import { SiteContents } from "./contents"; 3 | import { createFragment } from '@virtualstate/dom'; 4 | 5 | export const SiteBody = 6 | -------------------------------------------------------------------------------- /src/contents/current-state.tsx: -------------------------------------------------------------------------------- 1 | import { h } from "../h"; 2 | 3 | export const CurrentState = ( 4 |

5 |

Current project state

6 |

7 | 8 |

9 |

10 | ) 11 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:15 2 | 3 | WORKDIR /usr/src 4 | 5 | RUN npm install --global http-server 6 | 7 | COPY ./package.json ./ 8 | COPY ./*lock* ./ 9 | 10 | RUN yarn 11 | 12 | COPY snowpack.config.js . 13 | COPY tsconfig.json . 14 | COPY .prettierrc . 15 | COPY src src 16 | COPY scripts scripts 17 | COPY public public 18 | 19 | RUN yarn build 20 | 21 | EXPOSE 8080 22 | 23 | CMD ["http-server", "./build", "-p", "8080", "--cors", "--proxy", "http://localhost:8080?"] 24 | -------------------------------------------------------------------------------- /scripts/jsdom.js: -------------------------------------------------------------------------------- 1 | import JSDOM from "jsdom"; 2 | 3 | const dom = new JSDOM.JSDOM(); 4 | 5 | // https://github.com/jsdom/jsdom/wiki/Don't-stuff-jsdom-globals-onto-the-Node-global 6 | // Don't do this 7 | global.window = dom.window; 8 | global.document = dom.window.document; 9 | global.Node = dom.window.Node; 10 | 11 | const KNOWN_USAGE = [ 12 | "HTMLTemplateElement" 13 | ]; 14 | 15 | for (const knownUsedKey of KNOWN_USAGE) { 16 | global[knownUsedKey] = dom.window[knownUsedKey]; 17 | } 18 | 19 | export default dom; 20 | -------------------------------------------------------------------------------- /src/contents/intro.tsx: -------------------------------------------------------------------------------- 1 | import { h } from '../h'; 2 | import { createFragment } from '@virtualstate/x'; 3 | import { Goals } from './goals'; 4 | import { Template } from '../template'; 5 | 6 | export const Intro = ( 7 | <> 8 | 15 | {Goals} 16 | 17 | ) 18 | -------------------------------------------------------------------------------- /src/contents/defer.ts: -------------------------------------------------------------------------------- 1 | export interface Deferred { 2 | resolve(value: T): void; 3 | reject(reason: unknown): void; 4 | promise: Promise; 5 | } 6 | 7 | export function deferred(): Deferred { 8 | let resolve: Deferred["resolve"] | undefined = undefined, 9 | reject: Deferred["reject"] | undefined = undefined; 10 | const promise = new Promise( 11 | (resolveFn, rejectFn) => { 12 | resolve = resolveFn; 13 | reject = rejectFn; 14 | } 15 | ); 16 | ok(resolve); 17 | ok(reject); 18 | return { 19 | resolve, 20 | reject, 21 | promise 22 | }; 23 | } 24 | 25 | function ok(value: unknown): asserts value { 26 | if (!value) { 27 | throw new Error("Value not provided"); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/contents/index.tsx: -------------------------------------------------------------------------------- 1 | import { h } from "../h"; 2 | import { Intro } from "./intro"; 3 | import { Example } from "./example"; 4 | import { Tokens } from './tokens'; 5 | import { Template } from '../template'; 6 | 7 | // TODO test 8 | 9 | export const SiteContents = ( 10 |

11 | {Intro} 12 | {Example} 13 | {Tokens} 14 | 22 |

23 | ); 24 | -------------------------------------------------------------------------------- /snowpack.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import("snowpack").SnowpackUserConfig } */ 2 | export default { 3 | mount: { 4 | /* ... */ 5 | "src": "/", 6 | "public": "/" 7 | }, 8 | exclude: [ 9 | "**/node_modules/**/*", 10 | ], 11 | plugins: [ 12 | /* ... */ 13 | ], 14 | routes: [ 15 | /* Enable an SPA Fallback in development: */ 16 | // {"match": "routes", "src": ".*", "dest": "/index.html"}, 17 | ], 18 | optimize: { 19 | /* Example: Bundle your final build: */ 20 | bundle: true, 21 | minify: true, 22 | target: "es2018", 23 | entrypoints: [ 24 | "index.html" 25 | ] 26 | }, 27 | packageOptions: { 28 | /* ... */ 29 | }, 30 | devOptions: { 31 | /* ... */ 32 | }, 33 | buildOptions: { 34 | /* ... */ 35 | jsxFactory: "h", 36 | jsxFragment: "createFragment" 37 | }, 38 | env: { 39 | 40 | } 41 | }; 42 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import { render, DOMVContext, createTimeline, Timeline } from '@virtualstate/dom'; 2 | import { SiteBody } from './site'; 3 | import { h } from "./h"; 4 | 5 | async function run() { 6 | 7 | const root = document.getElementById("root"); 8 | 9 | if (!root) { 10 | throw new Error("Expected root"); 11 | } 12 | 13 | const context = new DOMVContext({ 14 | root 15 | }); 16 | 17 | // const timelinePromise = createTimeline( 18 | // context, 19 | // reportTimeline 20 | // ); 21 | 22 | await render( 23 | , 24 | context 25 | ); 26 | 27 | console.log("Completed rendering"); 28 | 29 | await context.close(); 30 | 31 | // await reportTimeline(await timelinePromise); 32 | } 33 | 34 | async function reportTimeline(timeline: Timeline) { 35 | // console.log(timeline[timeline.length - 1]); 36 | } 37 | 38 | window.proposalSiteRender = run(); 39 | window.proposalSiteRender.catch(error => { 40 | throw error; 41 | }); 42 | 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "virtualstate.dev", 3 | "private": true, 4 | "license": "CC-0", 5 | "type": "module", 6 | "scripts": { 7 | "start": "snowpack dev", 8 | "build": "snowpack build && node scripts/prerender.js", 9 | "test": "echo \"This template does not include a test runner by default.\" && exit 1" 10 | }, 11 | "devDependencies": { 12 | "@types/jest": "^26.0.21", 13 | "@types/node": "^14.14.35", 14 | "jsdom": "^16.5.3", 15 | "snowpack": "^3.3.5", 16 | "typescript": "^4.2.3" 17 | }, 18 | "dependencies": { 19 | "@virtualstate/dom": "^2.14.5", 20 | "@virtualstate/examples": "^2.14.7", 21 | "@virtualstate/fringe": "^2.14.5", 22 | "@virtualstate/hooks": "^2.14.5", 23 | "@virtualstate/hooks-extended": "^2.14.5", 24 | "@virtualstate/union": "^2.14.5", 25 | "@virtualstate/x": "^2.14.5", 26 | "fp-ts": "^2.10.4", 27 | "io-ts": "^2.2.16", 28 | "iterable": "^5.7.0", 29 | "microtask-collector": "^3.1.0" 30 | }, 31 | "engines": { 32 | "node": ">=15.0.0" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | vsx 10 | 11 | 12 |

13 | 14 | 15 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/contents/goals.tsx: -------------------------------------------------------------------------------- 1 | import { h } from '../h'; 2 | import { Template } from '../template'; 3 | 4 | export const Goals = ( 5 | 31 | ) 32 | -------------------------------------------------------------------------------- /src/unbound.tsx: -------------------------------------------------------------------------------- 1 | import { SourceReference, VNode } from '@virtualstate/x'; 2 | import { assertElement, NativeOptionsVNode, render } from '@virtualstate/dom'; 3 | import { h } from '@virtualstate/x'; 4 | 5 | export interface UnboundOptions { 6 | reference?: SourceReference; 7 | source?: string; 8 | onComplete?(): void; 9 | onError?(error: unknown): void; 10 | } 11 | 12 | export function Unbound(options: UnboundOptions, child: VNode): NativeOptionsVNode { 13 | const bound = Symbol("Bound"); 14 | 15 | let rendering: Promise 16 | 17 | return { 18 | reference: options.reference ?? Symbol("Unbound"), 19 | source: options.source ?? "div", 20 | options: { 21 | type: "Element", 22 | onBeforeRender(root) { 23 | assertElement(root); 24 | rendering = rendering || ( 25 | createRender(root).then(noop) 26 | ); 27 | } 28 | } 29 | } 30 | 31 | async function createRender(root: Element) { 32 | try { 33 | root.append(document.createElement("span")); 34 | await render(, root); 35 | options.onComplete?.(); 36 | } catch (error) { 37 | options.onError?.(error); 38 | } 39 | } 40 | 41 | function Bound() { 42 | return child; 43 | } 44 | } 45 | 46 | function noop() { 47 | return undefined; 48 | } 49 | -------------------------------------------------------------------------------- /scripts/prerender.js: -------------------------------------------------------------------------------- 1 | import "./jsdom.js"; 2 | import { promises as fs } from "node:fs"; 3 | import { dirname, join } from 'node:path'; 4 | import JSDOM from "jsdom"; 5 | 6 | // Create a new root element 7 | const root = document.createElement("div"); 8 | root.id = "root"; 9 | 10 | // No harm in appending our root to the document body 11 | document.body.append(root); 12 | 13 | // This will initialise our sites render 14 | await import("../build/index.js"); 15 | 16 | // The bundler does not have top level await support, so we must utilise the global 17 | // the above import sets 18 | await window.proposalSiteRender; 19 | 20 | const directory = dirname(new URL(import.meta.url).pathname); 21 | 22 | const indexPath = join(directory, "../build/index.html"); 23 | const index = await fs.readFile(indexPath, "utf8"); 24 | 25 | const target = new JSDOM.JSDOM(index); 26 | 27 | // Copy over generated templates 28 | const template = document.createElement("template"); 29 | const foundTemplates = document.body.querySelectorAll("template[id]"); 30 | 31 | // Remove any existing versions of the template found 32 | for (const foundTemplate of foundTemplates) { 33 | const existing = target.window.document.getElementById(foundTemplate.id); 34 | if (existing) { 35 | existing.parentElement.removeChild(existing); 36 | } 37 | template.content.append(foundTemplate); 38 | } 39 | 40 | // Create a template in our target DOM and then copy over using an HTML string 41 | // then append these to the targets body using the target templates DocumentFragment 42 | const targetTemplate = target.window.document.createElement("template"); 43 | targetTemplate.innerHTML = template.innerHTML; 44 | target.window.document.body.append(targetTemplate.content); 45 | 46 | // Write to disk 47 | await fs.writeFile( 48 | indexPath, 49 | target.serialize() 50 | ) 51 | -------------------------------------------------------------------------------- /src/context.ts: -------------------------------------------------------------------------------- 1 | import { asyncHooks, source, asyncExtendedIterable, ExtendedAsyncIterable } from "iterable"; 2 | import { Is } from "io-ts"; 3 | 4 | export function createContext(defaultValue: T, name?: string, is?: Is, onRetrieveFailure?: (error?: unknown) => void, onStoreFailure?: (value: T, error?: unknown) => void): [() => ExtendedAsyncIterable, (value: T) => void] { 5 | let currentValue: T = defaultValue; 6 | 7 | // If `name` isn't provided, we aren't using storage 8 | // If `is` isn't provided, we are write only 9 | if (name && is) { 10 | try { 11 | const storedValue = localStorage.getItem(name); 12 | if (storedValue) { 13 | const parsedValue = JSON.parse(storedValue); 14 | if (is(parsedValue)) { 15 | currentValue = parsedValue; 16 | } 17 | } 18 | } catch (e) { 19 | // Silently continue, could not retrieve 20 | if (onRetrieveFailure) { 21 | onRetrieveFailure(e); 22 | } 23 | } 24 | } 25 | 26 | const preference = source(); 27 | const preferenceTriggered = new WeakMap(); 28 | const preferenceTrigger = asyncHooks({ 29 | next: async (iterator: AsyncIterator): Promise> => { 30 | if (preferenceTriggered.has(iterator)) { 31 | return iterator.next(); 32 | } 33 | preferenceTriggered.set(iterator, true); 34 | return { 35 | done: false, 36 | value: currentValue 37 | }; 38 | } 39 | }); 40 | 41 | return [ 42 | () => { 43 | return asyncExtendedIterable(preferenceTrigger(preference)); 44 | }, 45 | (value) => { 46 | currentValue = value; 47 | preference.push(value); 48 | if (name) { 49 | try { 50 | localStorage.setItem(name, JSON.stringify(value)); 51 | } catch (e) { 52 | // Silently continue, could not store 53 | if (onStoreFailure) { 54 | onStoreFailure(value, e); 55 | } 56 | } 57 | } 58 | } 59 | ]; 60 | } 61 | -------------------------------------------------------------------------------- /src/h.ts: -------------------------------------------------------------------------------- 1 | import { createNode, Source, VNode, VNodeRepresentationSource, Fragment } from "@virtualstate/x"; 2 | import { 3 | isGetDocumentNodeOptions, 4 | isNativeOptions, 5 | NativeOptions, 6 | isOnBeforeRenderOptions, 7 | isAttributesOptions 8 | } from "@virtualstate/dom"; 9 | 10 | export function h(source: Source, options?: O, ...children: VNodeRepresentationSource[]): VNode 11 | export function h(source: Source

Current project state

Virtual State X

Goals of this project

Tokens

This is an example of various capabilities of this pattern

A quick example

41 | This is an example of various 42 | capabilities of this pattern 43 |

Reacting to things