create-flow-os 0.0.1-dev.1771614697

package/profiles/client/packages/client/features/class-flow.ts

@@ -0,0 +1,116 @@
+import { effect } from '@flow-os';
+import { isGetter } from './utils.js';
+
+export function toStyleValue(v: unknown): string {
+  return typeof v === 'number' ? `${v}px` : String(v ?? '');
+}
+
+export function setStyleProp(el: HTMLElement, key: string, value: string): void {
+  if (key.startsWith('--')) el.style.setProperty(key, value);
+  else (el.style as unknown as Record<string, string>)[key] = value;
+}
+
+const CLASS_FLOW_MAP: Record<string, string> = {
+  text: 'fontSize',
+  mb: 'marginBottom',
+  mt: 'marginTop',
+  ml: 'marginLeft',
+  mr: 'marginRight',
+  mx: 'marginLeft',
+  my: 'marginTop',
+  m: 'margin',
+  pb: 'paddingBottom',
+  pt: 'paddingTop',
+  pl: 'paddingLeft',
+  pr: 'paddingRight',
+  px: 'paddingLeft',
+  py: 'paddingTop',
+  p: 'padding',
+  w: 'width',
+  h: 'height',
+  minW: 'minWidth',
+  minH: 'minHeight',
+  maxW: 'maxWidth',
+  maxH: 'maxHeight',
+  gap: 'gap',
+  rounded: 'borderRadius',
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  bottom: 'bottom',
+};
+
+function resolveClassFlowKey(k: string): string {
+  if (k.startsWith('--')) return k;
+  return CLASS_FLOW_MAP[k] ?? k;
+}
+
+function isClassFlowReactive(val: unknown): boolean {
+  return isGetter(val) || (Array.isArray(val) && val.length === 2 && isGetter(val[0]));
+}
+
+function resolveClassFlowValue(val: unknown): string {
+  if (isGetter(val)) return toStyleValue((val as () => unknown)());
+  if (Array.isArray(val) && val.length === 2 && isGetter(val[0]))
+    return String((val[0] as () => unknown)()) + String(val[1]);
+  return toStyleValue(val);
+}
+
+function applyClassFlowObj(el: HTMLElement, obj: Record<string, unknown>): void {
+  for (const [k, val] of Object.entries(obj))
+    setStyleProp(el, resolveClassFlowKey(k), resolveClassFlowValue(val));
+}
+
+export function applyClassFlow(el: HTMLElement, classFlowVal: unknown): void {
+  if (classFlowVal == null) return;
+  if (isGetter(classFlowVal)) {
+    effect(() => applyClassFlowObj(el, (classFlowVal as () => Record<string, unknown>)()));
+    return;
+  }
+  if (typeof classFlowVal !== 'object' || Array.isArray(classFlowVal) || classFlowVal instanceof Node) return;
+  const obj = classFlowVal as Record<string, unknown>;
+  const hasReactive = Object.values(obj).some(isClassFlowReactive);
+  if (hasReactive) {
+    effect(() => {
+      for (const [k, val] of Object.entries(obj))
+        setStyleProp(el, resolveClassFlowKey(k), resolveClassFlowValue(val));
+    });
+  } else {
+    applyClassFlowObj(el, obj);
+  }
+}
+
+export function applyClassAndClassList(
+  el: HTMLElement,
+  classVal: unknown,
+  classNameVal: unknown,
+  classListVal: unknown
+): void {
+  const base = classVal ?? classNameVal;
+  if (base == null && (classListVal == null || typeof classListVal !== 'object')) return;
+  effect(() => {
+    let baseStr = '';
+    if (base != null) {
+      if (Array.isArray(base)) {
+        baseStr = base
+          .map((item) => (isGetter(item) ? String((item as () => unknown)()) : String(item)))
+          .filter(Boolean)
+          .join(' ');
+      } else if (isGetter(base)) {
+        baseStr = String((base as () => unknown)());
+      } else {
+        baseStr = String(base);
+      }
+    }
+    const list = classListVal as Record<string, boolean | (() => boolean)> | undefined;
+    const truthy: string[] = [];
+    if (list && typeof list === 'object' && !(list instanceof Node)) {
+      for (const [cls, val] of Object.entries(list)) {
+        const v = isGetter(val) ? (val as () => boolean)() : val;
+        if (v) truthy.push(cls);
+      }
+    }
+    const full = [baseStr, ...truthy].filter(Boolean).join(' ');
+    el.setAttribute('class', full);
+  });
+}

package/profiles/client/packages/client/features/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Feature applicate a div, p, button, ecc.
+ * Un file per feature; qui si raggruppano e si espongono a jsx.
+ */
+export { applyClassFlow, applyClassAndClassList } from './class-flow.js';
+export { applyStyle } from './style.js';
+export { applyStyleFlow } from './style-flow.js';
+export { applyAttrs } from './attrs.js';

package/profiles/client/packages/client/features/pseudo-injector.ts

@@ -0,0 +1,40 @@
+import { styleToCssText } from '@flow-os/style';
+import type { PseudoKey } from '@flow-os/style';
+
+const PSEUDO_SELECTOR: Record<PseudoKey, string> = {
+  hover: ':hover',
+  active: ':active',
+  focus: ':focus',
+  focusVisible: ':focus-visible',
+};
+
+let styleEl: HTMLStyleElement | null = null;
+const cache = new Map<string, string>();
+let id = 0;
+
+function ensureStyleEl(): HTMLStyleElement {
+  if (styleEl) return styleEl;
+  styleEl = document.createElement('style');
+  styleEl.setAttribute('data-flow-style', '');
+  document.head.appendChild(styleEl);
+  return styleEl;
+}
+
+/** Restituisce className da aggiungere all'elemento. La regola .sf-{pseudo}-{id}:{pseudo} { ... } è iniettata una sola volta. */
+export function getPseudoClass(
+  pseudo: PseudoKey,
+  style: Record<string, string>
+): string {
+  const cssText = styleToCssText(style);
+  if (!cssText) return '';
+  const key = `${pseudo}:${cssText}`;
+  let className = cache.get(key);
+  if (className) return className;
+  className = `sf-${pseudo}-${++id}`;
+  cache.set(key, className);
+  const selector = `.${className}${PSEUDO_SELECTOR[pseudo]}`;
+  const rule = `${selector} { ${cssText} }`;
+  const el = ensureStyleEl();
+  el.appendChild(document.createTextNode(rule));
+  return className;
+}

package/profiles/client/packages/client/features/style-flow.ts

@@ -0,0 +1,106 @@
+import { effect } from '@flow-os';
+import { isGetter } from './utils.js';
+import {
+  VIEWPORT_KEYS,
+  PSEUDO_KEYS,
+  resolveLayer,
+  resolvePseudoStyle,
+  type PlainLayer,
+  type ViewportKey,
+  type PseudoKey,
+} from '@flow-os/style';
+import { getViewportBreakpoint } from './viewport.js';
+import { getPseudoClass } from './pseudo-injector.js';
+
+const RESERVED = new Set<string>([...VIEWPORT_KEYS, ...PSEUDO_KEYS]);
+
+/** Chiama getter e restituisce oggetto plain (una livello, escluse chiavi reserved). */
+function gatherPlain(obj: Record<string, unknown> | null | undefined): PlainLayer {
+  const out: PlainLayer = {};
+  if (!obj || typeof obj !== 'object' || Array.isArray(obj)) return out;
+  for (const [k, v] of Object.entries(obj)) {
+    if (RESERVED.has(k)) continue;
+    if (v === undefined || v === null) continue;
+    if (isGetter(v)) {
+      const x = (v as () => unknown)();
+      if (typeof x === 'boolean') out[k] = x;
+      else if (typeof x === 'number' || typeof x === 'string') out[k] = x;
+      else if (Array.isArray(x) && x.length === 2 && isGetter(x[0]))
+        out[k] = String((x[0] as () => unknown)()) + String(x[1]);
+      else out[k] = String(x);
+    } else if (typeof v === 'object' && v !== null && !(v instanceof Node)) {
+      if (k === 'base') out['base'] = (v as Record<string, string>)['base'] ?? String(v);
+      // nested layer (mob/tab/des/hover/...) già esclusi da RESERVED
+    } else {
+      out[k] = v as string | number | boolean;
+    }
+  }
+  return out;
+}
+
+/** Normalizza value in base string + flat object. */
+function normalize(
+  value: unknown
+): { base: string; flat: Record<string, unknown> } {
+  if (value == null) return { base: '', flat: {} };
+  if (typeof value === 'string') return { base: value, flat: {} };
+  if (Array.isArray(value)) {
+    const base = typeof value[0] === 'string' ? value[0] : '';
+    const flat = (value[1] && typeof value[1] === 'object' && !Array.isArray(value[1]))
+      ? (value[1] as Record<string, unknown>)
+      : {};
+    return { base, flat };
+  }
+  if (typeof value === 'object' && !Array.isArray(value) && !(value instanceof Node)) {
+    const flat = value as Record<string, unknown>;
+    const base = typeof flat['base'] === 'string' ? flat['base'] : '';
+    return { base, flat };
+  }
+  return { base: '', flat: {} };
+}
+
+export function applyStyleFlow(el: HTMLElement, value: unknown): void {
+  if (value == null) return;
+  const { base, flat } = normalize(value);
+  let prevStyleKeys: string[] = [];
+
+  effect(() => {
+    const viewport: ViewportKey = getViewportBreakpoint();
+    const plainBase = gatherPlain(flat);
+    if (base) plainBase.base = (plainBase.base ? `${plainBase.base} ` : '') + base;
+    const viewportLayer = flat[viewport];
+    const plainViewport = gatherPlain(
+      viewportLayer && typeof viewportLayer === 'object' && !Array.isArray(viewportLayer)
+        ? (viewportLayer as Record<string, unknown>)
+        : {}
+    );
+    const merged: PlainLayer = { ...plainBase };
+    if (plainViewport.base) merged.base = (merged.base ? `${merged.base} ` : '') + plainViewport.base;
+    for (const [k, v] of Object.entries(plainViewport)) {
+      if (k === 'base') continue;
+      (merged as Record<string, unknown>)[k] = v;
+    }
+    const resolved = resolveLayer(merged);
+
+    const pseudoClasses: string[] = [];
+    for (const pseudo of PSEUDO_KEYS) {
+      const rawPseudo = flat[pseudo];
+      const plainPseudo = gatherPlain(
+        rawPseudo && typeof rawPseudo === 'object' && !Array.isArray(rawPseudo)
+          ? (rawPseudo as Record<string, unknown>)
+          : {}
+      );
+      const stylePseudo = resolvePseudoStyle(plainPseudo);
+      const cls = getPseudoClass(pseudo as PseudoKey, stylePseudo);
+      if (cls) pseudoClasses.push(cls);
+    }
+
+    el.className = [resolved.class, ...pseudoClasses].filter(Boolean).join(' ');
+    for (const k of prevStyleKeys) el.style.removeProperty(k);
+    prevStyleKeys = Object.keys(resolved.style);
+    for (const [k, v] of Object.entries(resolved.style)) {
+      if (k.startsWith('--')) el.style.setProperty(k, v);
+      else (el.style as unknown as Record<string, string>)[k] = v;
+    }
+  });
+}

package/profiles/client/packages/client/features/style.ts

@@ -0,0 +1,27 @@
+import { effect } from '@flow-os';
+import { isGetter } from './utils.js';
+import { setStyleProp, toStyleValue } from './class-flow.js';
+
+export function applyStyle(el: HTMLElement, styleVal: unknown): void {
+  if (styleVal == null) return;
+  if (isGetter(styleVal)) {
+    effect(() => {
+      const style = (styleVal as () => Record<string, string> | string)();
+      if (typeof style === 'string') {
+        el.setAttribute('style', style);
+      } else if (style && typeof style === 'object') {
+        for (const [sk, sv] of Object.entries(style)) setStyleProp(el, sk, toStyleValue(sv));
+      }
+    });
+    return;
+  }
+  if (typeof styleVal !== 'object' || styleVal === null || styleVal instanceof Node) return;
+  const style = styleVal as Record<string, string | number | (() => string | number)>;
+  for (const [sk, sv] of Object.entries(style)) {
+    if (isGetter(sv)) {
+      effect(() => setStyleProp(el, sk, toStyleValue((sv as () => unknown)())));
+    } else {
+      setStyleProp(el, sk, toStyleValue(sv));
+    }
+  }
+}

package/profiles/client/packages/client/features/utils.ts

@@ -0,0 +1,4 @@
+/** Getter reattivo (funzione senza argomenti). */
+export function isGetter(fn: unknown): fn is () => unknown {
+  return typeof fn === 'function' && fn.length === 0;
+}

package/profiles/client/packages/client/features/viewport.ts

@@ -0,0 +1,20 @@
+import { state } from '@flow-os';
+import type { ViewportKey } from '@flow-os/style';
+import { getViewportKeyFromWidth } from '@flow-os/style';
+
+const [getViewport, setViewport] = state<ViewportKey>('mob');
+let subscribed = false;
+
+function subscribe(): void {
+  if (subscribed) return;
+  subscribed = true;
+  const update = () => setViewport(getViewportKeyFromWidth(window.innerWidth));
+  update();
+  window.addEventListener('resize', update);
+}
+
+/** Breakpoint viewport reattivo (mob/tab/des). Una sola subscription condivisa. */
+export function getViewportBreakpoint(): ViewportKey {
+  subscribe();
+  return getViewport();
+}

package/profiles/client/packages/client/index.ts

@@ -0,0 +1,4 @@
+/// <reference path="./jsx-types.d.ts" />
+export { Fragment, jsx, jsxs, jsxDEV } from './jsx.js';
+export { normalizeChild, setContent } from './dom.js';
+export { default as config } from './config.js';

package/profiles/client/packages/client/jsx-dev-runtime.ts

@@ -0,0 +1 @@
+export * from './jsx.js';

package/profiles/client/packages/client/jsx-runtime.ts

@@ -0,0 +1 @@
+export * from './jsx.js';

package/profiles/client/packages/client/jsx-types.d.ts

@@ -0,0 +1,64 @@
+import type { StyleShorthandKey } from '@flow-os/style';
+
+declare global {
+  namespace JSX {
+    type Element = Node;
+
+    /** classFlow (legacy) */
+    type ClassFlowValue = string | number | (() => string | number) | [() => number, string];
+
+    /** styleFlow: valori per proprietà stile (numero→px, getter, [getter, unità]). */
+    type StyleFlowStyleValue =
+      | number
+      | string
+      | (() => number | string)
+      | [() => number, string];
+    /** styleFlow: valori per classList (bool/getter). */
+    type StyleFlowClassValue = boolean | (() => boolean);
+
+    /** Layer per hover/active/focus: solo shorthand stile. */
+    interface StyleFlowPseudoLayer
+      extends Partial<Record<StyleShorthandKey, StyleFlowStyleValue>> {
+      [key: string]: StyleFlowStyleValue | undefined;
+    }
+
+    /** Layer styleFlow: base + responsive + pseudo + shorthand + classList. */
+    interface StyleFlowLayer
+      extends Partial<Record<StyleShorthandKey, StyleFlowStyleValue>> {
+      base?: string;
+      mob?: StyleFlowLayer;
+      tab?: StyleFlowLayer;
+      des?: StyleFlowLayer;
+      hover?: StyleFlowPseudoLayer;
+      active?: StyleFlowPseudoLayer;
+      focus?: StyleFlowPseudoLayer;
+      focusVisible?: StyleFlowPseudoLayer;
+      [key: string]:
+        | StyleFlowStyleValue
+        | StyleFlowClassValue
+        | StyleFlowLayer
+        | StyleFlowPseudoLayer
+        | string
+        | undefined;
+    }
+
+    /** styleFlow: stringa (solo classi) | [base, layer] | layer. */
+    type StyleFlow = string | [string, StyleFlowLayer] | StyleFlowLayer;
+
+    interface FlowHTMLAttributes {
+      class?: string | (() => string) | (string | (() => string))[];
+      classList?: Record<string, boolean | (() => boolean)>;
+      classFlow?: (() => Record<string, string | number>) | Record<string, ClassFlowValue>;
+      styleFlow?: StyleFlow;
+      style?: Record<string, string | number | (() => string | number)>;
+      children?: unknown;
+      [key: string]: unknown;
+    }
+
+    interface IntrinsicElements {
+      [tag: string]: FlowHTMLAttributes;
+    }
+  }
+}
+
+export {};

package/profiles/client/packages/client/jsx.ts

@@ -0,0 +1,99 @@
+/// <reference path="./jsx-types.d.ts" />
+import { effect } from '@flow-os';
+import { isGetter } from './features/utils.js';
+import {
+  applyClassFlow,
+  applyClassAndClassList,
+  applyStyle,
+  applyStyleFlow,
+  applyAttrs,
+} from './features/index.js';
+
+export const Fragment = Symbol.for('flow.fragment');
+
+type Props = Record<string, unknown> & { children?: unknown };
+type JsxType = string | ((props: Props) => Node | null) | typeof Fragment;
+
+function normalizeChild(c: unknown): Node | string | null {
+  if (c == null) return null;
+  if (typeof c === 'string' || typeof c === 'number') return String(c);
+  if (c instanceof Node) return c;
+  if (isGetter(c)) {
+    const text = document.createTextNode('');
+    effect(() => {
+      text.textContent = String(c());
+    });
+    return text;
+  }
+  if (Array.isArray(c)) {
+    const frag = document.createDocumentFragment();
+    for (const x of c) {
+      const n = normalizeChild(x);
+      if (n !== null) frag.appendChild(typeof n === 'string' ? document.createTextNode(n) : n);
+    }
+    return frag;
+  }
+  return null;
+}
+
+function appendChildren(el: Node, children: unknown): void {
+  const c = normalizeChild(children);
+  if (c === null) return;
+  if (typeof c === 'string') {
+    el.appendChild(document.createTextNode(c));
+    return;
+  }
+  el.appendChild(c);
+}
+
+function applyProps(el: HTMLElement, props: Props): void {
+  const {
+    children,
+    class: classProp,
+    className: classNameProp,
+    classList,
+    classFlow,
+    style: styleProp,
+    styleFlow,
+    ...rest
+  } = props;
+  if (styleFlow != null) {
+    applyStyleFlow(el, styleFlow);
+  } else {
+    applyClassFlow(el, classFlow);
+    applyClassAndClassList(el, classProp, classNameProp, classList);
+    applyStyle(el, styleProp);
+  }
+  applyAttrs(el, rest);
+  if (children !== undefined) appendChildren(el, children);
+}
+
+export function jsxs(type: JsxType, props: Props, _key?: string | number): Node {
+  return jsx(type, props, _key);
+}
+
+export function jsx(type: JsxType, props: Props, _key?: string | number): Node {
+  if (type === Fragment) {
+    const frag = document.createDocumentFragment();
+    if (props.children !== undefined) appendChildren(frag, props.children);
+    return frag;
+  }
+  if (typeof type === 'function') {
+    const out = type(props);
+    return out ?? document.createDocumentFragment();
+  }
+  const el = document.createElement(type as string);
+  applyProps(el, props);
+  return el;
+}
+
+export function jsxDEV(
+  type: JsxType,
+  props: Props,
+  key: string | number | undefined,
+  _isStatic: boolean,
+  _source: unknown,
+  _self: unknown
+): Node {
+  return jsx(type, props, key as string | undefined);
+}

package/profiles/client/packages/client/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@flow-os/client",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "dependencies": {
+    "@flow-os": "workspace:*",
+    "@flow-os/router": "workspace:*",
+    "@flow-os/style": "workspace:*"
+  },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "import": "./index.ts",
+      "default": "./index.ts"
+    },
+    "./config": {
+      "types": "./config.ts",
+      "import": "./config.ts",
+      "default": "./config.ts"
+    },
+    "./vite": {
+      "types": "./vite.ts",
+      "import": "./vite.ts",
+      "default": "./vite.ts"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx.ts",
+      "import": "./jsx.ts",
+      "default": "./jsx.ts"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx.ts",
+      "import": "./jsx.ts",
+      "default": "./jsx.ts"
+    }
+  }
+}

package/profiles/client/packages/client/vite.ts

@@ -0,0 +1,42 @@
+/// <reference types="node" />
+import { writeFileSync } from 'fs';
+import { resolve } from 'path';
+import type { Plugin } from 'vite';
+
+const FLOW_ENTRY_ID = '\0flow-entry';
+const ENTRY_CODE = `import * as root from '/client/root.tsx';
+import { run } from '@flow-os/router';
+run(root.default, import.meta.glob('/client/routes/**/*.tsx'), root.fallback != null ? { fallback: root.fallback } : undefined);
+`;
+
+/** Reset stili browser: niente margin/padding di default, layout full viewport. */
+const FLOW_BASE_STYLE = `<style>html,body{margin:0;padding:0;min-height:100vh}#app{min-height:100vh;box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}</style>`;
+
+const HTML = `<!DOCTYPE html>
+<html lang="it">
+<head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Flow</title>${FLOW_BASE_STYLE}</head>
+<body><div id="app"></div><script type="module" src="/entry.tsx"></script></body>
+</html>`;
+
+export function flow(): Plugin {
+  return {
+    name: 'flow',
+    config() {
+      return {
+        root: '.',
+        esbuild: { jsx: 'automatic', jsxImportSource: '@flow-os/client' },
+        resolve: { alias: { '~': resolve(process.cwd(), 'client') } },
+        build: { target: 'esnext', minify: 'esbuild', sourcemap: true },
+      };
+    },
+    configResolved(_config) {
+      writeFileSync(resolve(process.cwd(), 'index.html'), HTML);
+    },
+    resolveId(id) {
+      return id === '/entry.tsx' ? FLOW_ENTRY_ID : null;
+    },
+    load(id) {
+      return id === FLOW_ENTRY_ID ? ENTRY_CODE : null;
+    },
+  };
+}

package/profiles/client/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@flow-os/client",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["client/*"],
+      "~server/*": ["server/*"],
+      "@flow-os": ["packages/flow-os/index.ts"],
+      "@flow-os/*": ["packages/*"]
+    }
+  },
+  "include": ["client", "server", "packages/*", "vite.config.ts"]
+}