@torpor/view 0.2.0 → 0.3.0

package/.oxlintrc.json

@@ -0,0 +1,3 @@
+{
+	"ignorePatterns": ["test/**/output"]
+}

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @torpor/view
 
+## 0.3.0
+
+### Minor Changes
+
+- 51dbba7: Chore: drop CJS build and go ESM only
+- 9fcc613: Feat: add proper signals reactivity
+- c4f9d18: !Feat: replaced <:head> with @head
+- 5598bc9: !Feat: remove `:` from special tags and attributes
+- c2b5c02: Feat: source maps
+
+### Patch Changes
+
+- be98b35: Fix: keep options when setting a new proxied value
+- 2298a87: Fix: SVG classes
+- 3a8431a: Fix: run @ifs, @switches and @awaits with a closure signal
+- eb58d37: Feat: ReactiveDate wrapper for use in reactive state
+- e0637be: Fix: moving a range that was in a fragment
+- f5f84e6: Fix: slightly better global style parsing
+- 6cc57ff: Fix: don't double render slots
+- 18f1ccf: Perf: combine fragment effects
+- 91d1536: Fix: re-check whether the parent is a fragment
+- 4dc16df: Fix: slightly better selector style parsing
+- 543b229: Fix: run @ifs and @switches with an index signal
+- 3cf3ae6: Fix: skip hydration start when getting the root
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -18,38 +18,39 @@ npm install torpor
 - Components are functions
   - In a file with the `.torp` extension
   - HTML markup in a `@render` section
+  - `<head>` content in a `@head` section
   - CSS in a `@style` section
   - Child components in child component functions
 - In-markup JavaScript logic
-  - @if statement
-  - @for loop
-  - @switch statement
-  - @await statement for loading data from an async function
+  - `@if` statement
+  - `@for` loop
+  - `@switch` statement
+  - `@await` statement for loading data from an async function
   - And
-    - @replace to re-run a section when a property changes
-    - @const to declare a const variable in markup
-    - @console for logging
-    - @debugger for debugging
-    - @function to declare a function in markup
-    - @html to render HTML e.g. from $props
+    - `@replace` to re-run a section when a property changes
+    - `@const` to declare a const variable in markup
+    - `@console` for logging
+    - `@debugger` for debugging
+    - `@function` or `@async function` to declare a function in markup
+    - `@html` to render HTML e.g. from $props
 - Runtime reactivity
-  - $watch to create a proxy that updates UI on property changes
-  - $run to create an effect that is re-run when its dependencies change
-  - $mount to create an effect that runs after a component has been mounted
-  - $unwrap to get the target object from the proxy
+  - `$watch` to create a proxy that updates UI on property changes
+  - `$cache` to cache proxy getter values that are expensive to update
+  - `$run` to create an effect that is re-run when its dependencies change
+  - `$mount` to create an effect that runs after a component has been mounted
+  - And
+    - `$unwrap` to get the target object from the proxy
+    - `$peek` to get the value of a target object without re-running effects on change
+    - `$batch` to delay effects and then run them all at once
 - Automatic scoping of styles to component
-- Two-way binding with &value, &checked, etc
-- Element binding to a script variable with &ref={...}
+- Two-way binding with `&value`, `&checked`, etc
+- Element binding to a script variable with `&ref={...}`
 - Element in and out transitions using the Web Animations API
-- Run an effect when an element is added to the DOM with :onmount={(el) => ...}
-- Special tags (mostly not yet implemented...)
-  - <:component self={...}> inserts a dynamic component
-  - <:element self={...}> inserts a dynamic element
-  - <:trim> trims whitespace around the tag
-  - <:head> for adding content to the <head> tag
-  - <:window> for adding events to the `window` object
-  - <:document> for adding events to the `document` object
-  - <:body> for adding events to the `body` object
+- Run an effect when an element is added to the DOM with `onmount={(el) => ...}`
+- Special tags
+  - `<@component self={...}>` inserts a dynamic component
+  - `<@element self={...}>` inserts a dynamic element
+  - `<@trim>` trims whitespace around the tag (TODO)
 
 ### Not yet
 
@@ -63,7 +64,7 @@ npm install torpor
  */
 export default function Component($props: { name: string }) {
     // Use the $watch function to declare reactive state
-    const $state = $watch({
+    let $state = $watch({
         count: 0,
         get isEven() {
             return this.count % 2 === 0

package/dist/Component-d19HOoEw.d.ts

@@ -0,0 +1,11 @@
+//#region src/types/SlotRender.d.ts
+type SlotRender = (parent: ParentNode, anchor: Node | null, $sprops?: Record<PropertyKey, any>, $context?: Record<PropertyKey, any>) => void;
+//#endregion
+//#region src/types/Component.d.ts
+/**
+* A component that can be mounted or hydrated
+*/
+type Component = ($parent: ParentNode, $anchor: Node | null, $props?: Record<PropertyKey, any>, $context?: Record<PropertyKey, any>, $slots?: Record<string, SlotRender>) => void;
+//#endregion
+export { Component, SlotRender };
+//# sourceMappingURL=Component-d19HOoEw.d.ts.map

package/dist/Component-d19HOoEw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component-d19HOoEw.d.ts","names":[],"sources":["../src/types/SlotRender.ts","../src/types/Component.ts"],"sourcesContent":[],"mappings":";KAAK,UAAA,YACI,oBACA,uBACE,OAAO,8BACN,OAAO;;;;;;KCCd,SAAA,GDHI,CAAA,OAAA,ECIC,UDJD,EAAA,OAAA,ECKC,IDLD,GAAA,IAAA,EAAA,MAAA,CAAA,ECMC,MDND,CCMQ,WDNR,EAAA,GAAA,CAAA,EAAA,QAAA,CAAA,ECOG,MDPH,CCOU,WDPV,EAAA,GAAA,CAAA,EAAA,MAAA,CAAA,ECQC,MDRD,CAAA,MAAA,ECQgB,UDRhB,CAAA,EAAA,GAAA,IAAA"}

package/dist/ServerSlotRender-BiG4xB8e.d.ts

@@ -0,0 +1,41 @@
+//#region src/render/$batch.d.ts
+/**
+* Runs updates to proxy values in a batch, where the updates are stored in
+* context, and dependent effects are run all at once at the end.
+*
+* @param fn The function containing the batched updates to run.
+*/
+declare function $batch<T>(fn: () => T): T;
+//#endregion
+//#region src/render/$cache.d.ts
+/**
+* Caches a computed value from signals accessed in a property getter.
+*
+* @param fn The function containing the signals to compute and cache.
+*/
+declare function $cache<T>(fn: () => T): T;
+//#endregion
+//#region src/types/Cleanup.d.ts
+/**
+* A function that may be returned from an effect, and is run before the effect
+* is run or destroyed
+*/
+type Cleanup = () => void;
+//#endregion
+//#region src/render/$peek.d.ts
+declare function $peek<T>(fn: () => T): T;
+//#endregion
+//#region src/render/buildClasses.d.ts
+declare function buildClasses(value: unknown, styleHash?: string): string;
+//#endregion
+//#region src/render/buildStyles.d.ts
+declare function buildStyles(value: unknown): string;
+//#endregion
+//#region src/render/formatText.d.ts
+declare function formatText(value: any): string;
+//#endregion
+//#region src/types/ServerSlotRender.d.ts
+type ServerSlotRender = ($props?: Record<PropertyKey, any>, $context?: Record<PropertyKey, any>) => void;
+//#endregion
+export { $batch, $cache, $peek, Cleanup, ServerSlotRender, buildClasses, buildStyles, formatText };
+//# sourceMappingURL=ServerSlotRender-BiG4xB8e.d.ts.map

package/dist/ServerSlotRender-BiG4xB8e.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerSlotRender-BiG4xB8e.d.ts","names":[],"sources":["../src/render/$batch.ts","../src/render/$cache.ts","../src/types/Cleanup.ts","../src/render/$peek.ts","../src/render/buildClasses.ts","../src/render/buildStyles.ts","../src/render/formatText.ts","../src/types/ServerSlotRender.ts"],"sourcesContent":[],"mappings":";;;;;;;iBAUwB,oBAAoB,IAAI;;;;;;;;AAAA,iBCAxB,MDAwB,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,GCAJ,CDAI,CAAA,ECAA,CDAA;;;;;;;KEN3C,OAAA,GFM2C,GAAA,GAAA,IAAA;;;iBGNxB,mBAAmB,IAAI;;;iBCJvB,YAAA;;;iBCAA,WAAA;;;iBCAA,UAAA;;;KCAnB,gBAAA,aACK,OAAO,8BACL,OAAO"}

package/dist/compile.d.ts

@@ -1,156 +1,210 @@
-export { C as Component } from './Component-CysAnHpO.js';
-
-type BuildOptions = {
-    /**
-     * Whether to create the component for server side rendering
-     */
-    server?: boolean;
-    /**
-     * If true, fragments will be built with calls to createElement etc. If
-     * false, fragments will be built with innerHTML. Using createElement is a
-     * bit slower, but may be useful in the future for rendering to different
-     * targets
-     */
-    useCreateElement?: boolean;
-    /**
-     * For internal testing and benchmarking
-     */
-    renderFolder?: string;
-};
-
-type Import = {
-    name: string;
-    alias?: string;
-    path: string;
-    nonDefault: boolean;
-    component: boolean;
-};
-
-type Fragment = {
-    number: number;
-    text: string;
-    ns: boolean;
-    events: {
-        varName: string;
-        eventName: string;
-        handler: string;
-    }[];
-    animations: string[];
-    endVarName?: string;
-};
-
+import { Component } from "./Component-d19HOoEw.js";
+
+//#region src/types/BuildOptions.d.ts
+interface BuildOptions {
+  /**
+  * Whether to create the component for server side rendering
+  */
+  server?: boolean;
+  /**
+  * Whether to create source maps.
+  */
+  mapped?: boolean;
+  /**
+  * If true, fragments will be built with calls to createElement etc. If
+  * false, fragments will be built with innerHTML. Using createElement is a
+  * bit slower, but may be useful in the future for rendering to different
+  * targets
+  */
+  useCreateElement?: boolean;
+  /**
+  * For internal testing and benchmarking
+  */
+  renderFolder?: string;
+}
+//#endregion
+//#region src/compile/types/Import.d.ts
+interface Import {
+  name: string;
+  alias?: string;
+  path: string;
+  nonDefault: boolean;
+  component: boolean;
+}
+//#endregion
+//#region src/compile/types/SourceRange.d.ts
+interface SourceRange {
+  start: number;
+  end: number;
+}
+//#endregion
+//#region src/compile/types/ScriptChunk.d.ts
+interface ScriptChunk {
+  script: string;
+  range: SourceRange;
+}
+//#endregion
+//#region src/compile/types/nodes/Fragment.d.ts
+interface Fragment {
+  number: number;
+  text: string;
+  ns: boolean;
+  effects: {
+    functionBody: string;
+    ranges: SourceRange[];
+    offsets: number[];
+    lengths: number[];
+  }[];
+  events: {
+    varName: string;
+    eventName: string;
+    handler: string;
+  }[];
+  animations: string[];
+  endVarName?: string;
+}
+//#endregion
+//#region src/compile/types/nodes/NodeType.d.ts
 type NodeType = "root" | "control" | "component" | "element" | "text" | "special";
-
-type TemplateNode = {
-    type: NodeType;
-    scopeStyles?: boolean;
-    varName?: string;
-    handled?: boolean;
-};
-
-type ParentNode = TemplateNode & {
-    type: NodeType;
-    children: TemplateNode[];
-};
-
-type RootNode = ParentNode & {
-    type: "root";
-    children: TemplateNode[];
-    fragment?: Fragment;
-};
-
-type Attribute = {
-    name: string;
-    value: string;
-};
-
-type StyleBlock = {
-    selector: string;
-    attributes: Attribute[];
-    children: StyleBlock[];
-};
-
-type Style = {
-    global: boolean;
-    blocks: StyleBlock[];
-    hash: string;
-};
-
-type TemplateComponent = {
-    start?: number;
-    /** The component's name */
-    name?: string;
-    /** Whether the component is defined in a default function */
-    default?: boolean;
-    /** Params declared by the user in the component's function */
-    params?: string;
-    markup?: RootNode;
-    style?: Style;
-    /** $props that are used in the component's function */
-    props?: string[];
-    /** $context props that are used in the component's function */
-    contextProps?: string[];
-    /** $slot props that are used in the component's function */
-    slotProps?: string[];
-};
-
+//#endregion
+//#region src/compile/types/nodes/TemplateNode.d.ts
+interface TemplateNode {
+  type: NodeType;
+  scopeStyles?: boolean;
+  varName?: string;
+  handled?: boolean;
+}
+//#endregion
+//#region src/compile/types/nodes/ParentNode.d.ts
+interface ParentNode extends TemplateNode {
+  type: NodeType;
+  children: TemplateNode[];
+}
+//#endregion
+//#region src/compile/types/nodes/RootNode.d.ts
+interface RootNode extends ParentNode {
+  type: "root";
+  children: TemplateNode[];
+  fragment?: Fragment;
+}
+//#endregion
+//#region src/compile/types/styles/Attribute.d.ts
+interface Attribute {
+  name: string;
+  value: string;
+}
+//#endregion
+//#region src/compile/types/styles/StyleBlock.d.ts
+interface StyleBlock {
+  selector: string;
+  attributes: Attribute[];
+  children: StyleBlock[];
+}
+//#endregion
+//#region src/compile/types/styles/Style.d.ts
+interface Style {
+  global: boolean;
+  blocks: StyleBlock[];
+  hash: string;
+}
+//#endregion
+//#region src/types/TemplateComponent.d.ts
+interface TemplateComponent {
+  start?: number;
+  /** The component's name */
+  name?: string;
+  /** Whether the component is defined with a default function */
+  default?: boolean;
+  /** Params declared by the user in the component's function */
+  params?: string;
+  markup?: RootNode;
+  head?: RootNode;
+  style?: Style;
+  /** $props that are used in the component's function */
+  props?: string[];
+  /** $context props that are used in the component's function */
+  contextProps?: string[];
+  needsContext?: boolean;
+  /** $slot props that are used in the component's function */
+  slotProps?: string[];
+}
+//#endregion
+//#region src/types/Template.d.ts
 /**
- * The template for a component file, consisting of parts like script, markup and styles
- */
-type Template = {
-    imports: Import[];
-    script: string;
-    components: TemplateComponent[];
-};
-
-type BuildResult = {
-    code: string;
-    styles: {
-        style: string;
-        hash: string;
-    }[];
-};
-
+* The template for a component file, consisting of parts like script, markup and styles
+*/
+interface Template {
+  imports: Import[];
+  script: ScriptChunk[];
+  components: TemplateComponent[];
+}
+//#endregion
+//#region src/compile/types/SourceMapping.d.ts
+interface SourceMapping {
+  script: string;
+  source: SourceRange;
+  compiled: SourceRange;
+}
+//#endregion
+//#region src/compile/types/BuildResult.d.ts
+interface BuildResult {
+  code: string;
+  styles: {
+    style: string;
+    hash: string;
+  }[];
+  map: SourceMapping[];
+}
+//#endregion
+//#region src/compile/build.d.ts
 /**
- * Builds a component template into code and styles for rendering
- *
- * @param template The component template, possibly including script, markup and styles
- *
- * @returns The component's code and styles
- */
+* Builds a component template into code and styles for rendering
+*
+* @param template The component template, possibly including script, markup and styles
+*
+* @returns The component's code and styles
+*/
 declare function build(template: Template, options?: BuildOptions): BuildResult;
-
+//#endregion
+//#region src/compile/buildType.d.ts
 /**
- * Builds a component template into a d.ts file
- *
- * @param name The name of the component
- * @param template The component template, possibly including script, markup and styles
- *
- * @returns The d.ts file content
- */
+* Builds a component template into a d.ts file
+*
+* @param name The name of the component
+* @param template The component template, possibly including script, markup and styles
+*
+* @returns The d.ts file content
+*/
 declare function buildType(template: Template, options?: BuildOptions): string;
-
-type CompileError = {
-    message: string;
-    start: number;
-    line: number;
-    column: number;
-};
-
-type ParseResult = {
-    ok: boolean;
-    errors: CompileError[];
-    template?: Template;
-};
-
+//#endregion
+//#region src/compile/types/CompileError.d.ts
+interface CompileError {
+  message: string;
+  startIndex: number;
+  startLine: number;
+  startChar: number;
+  endIndex: number;
+  endLine: number;
+  endChar: number;
+}
+//#endregion
+//#region src/compile/types/ParseResult.d.ts
+interface ParseResult {
+  ok: boolean;
+  errors: CompileError[];
+  template?: Template;
+}
+//#endregion
+//#region src/compile/parse.d.ts
 /**
- * Parses source code into a component template
- *
- * @param source The source code
- *
- * @returns A result indicating whether parsing was ok, and if so, containing
- * the component template's parts such as script, markup and styles
- */
+* Parses source code into a component template
+*
+* @param source The source code
+*
+* @returns A result indicating whether parsing was ok, and if so, containing
+* the component template's parts such as script, markup and styles
+*/
 declare function parse(source: string): ParseResult;
-
-export { type Template, build, buildType, parse };
+//#endregion
+export { type Component, type Template, build, buildType, parse };
+//# sourceMappingURL=compile.d.ts.map

package/dist/compile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compile.d.ts","names":[],"sources":["../src/types/BuildOptions.ts","../src/compile/types/Import.ts","../src/compile/types/SourceRange.ts","../src/compile/types/ScriptChunk.ts","../src/compile/types/nodes/Fragment.ts","../src/compile/types/nodes/NodeType.ts","../src/compile/types/nodes/TemplateNode.ts","../src/compile/types/nodes/ParentNode.ts","../src/compile/types/nodes/RootNode.ts","../src/compile/types/styles/Attribute.ts","../src/compile/types/styles/StyleBlock.ts","../src/compile/types/styles/Style.ts","../src/types/TemplateComponent.ts","../src/types/Template.ts","../src/compile/types/SourceMapping.ts","../src/compile/types/BuildResult.ts","../src/compile/build.ts","../src/compile/buildType.ts","../src/compile/types/CompileError.ts","../src/compile/types/ParseResult.ts","../src/compile/parse.ts"],"sourcesContent":[],"mappings":";;;UAAyB,YAAA;;;;;;;;;;;;;;;EGAI,gBAEJ,CAAA,EAAA,OAAA;;;;ECFI,YAEJ,CAAA,EAAA,MAAA;;;;UHFA,MAAA;;;MDAA,EAAA,MAAA;;;;;;UEAA,WAAA;;;;;;UCEA,WAAA;;OHFA,EGIjB,WHJiB;;;;UIEA,QAAA;;MJFA,EAAA,MAAA;;;;UCAA,EGQf,WHRe,EAAA;;;;QCAA,EAAA;;;;ECAI,CAAA,EAEJ;;;;;;KEFpB,QAAA;;;UCEoB,YAAA;QAClB;aNHkB,CAAA,EAAA,OAAA;;;;;;UOGA,UAAA,SAAmB;MPHnB,EOIlB,QPJkB;YOKd;;;;APLc,UQIA,QAAA,SAAiB,URJjB,CAAA;;YQMd;aAGC;;;;UCTa,SAAA;;;;;;UCEA,UAAA;;YVFA,EUIZ,SVJY,EAAA;YUKd;;;;UCHc,KAAA;;QXFA,EWIhB,UXJgB,EAAA;;;;;UYGA,iBAAA;OZHA,CAAA,EAAA,MAAA;;;;SCAA,CAAA,EAAA,OAAA;;;WWWf;MVXe,CAAA,EUYjB,QVZiB;UUahB;;;ETboB;;;;ECAA,SAEJ,CAAA,EAAA,MAAA,EAAA;;;;;;;USKA,QAAA;SZPA,EYQf,MZRe,EAAA;UYShB;cACI;;;;UCRY,aAAA;;QdFA,EcIhB,WdJgB;YcKd;;;;UCHc,WAAA;;QfFA,EAAA;;;;KCAA,EcQnB,adRmB,EAAA;;;;;;;;;;;iBeeD,KAAA,WAAgB,oBAAoB,eAAe;;;;;;;;;;;iBCHnD,SAAA,WAAoB,oBAAoB;;;UCZvC,YAAA;;;WlBAA,EAAA,MAAA;;;;SCAA,EAAA,MAAA;;;;UkBGA,WAAA;MnBHA,OAAA;UmBKhB;aACG;;;;;;;;;;;;iBCKY,KAAA,kBAAuB"}