ripple 0.2.74 → 0.2.76

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.74",
+  "version": "0.2.76",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",
@@ -29,6 +29,10 @@
       "default": "./src/runtime/index.js"
     },
     "./package.json": "./package.json",
+    "./server": {
+      "types": "./types/server.d.ts",
+      "default": "./src/server/index.js"
+    },
     "./compiler": {
       "types": "./types/index.d.ts",
       "require": "./compiler/index.js",
@@ -42,6 +46,9 @@
     "./internal/client": {
       "default": "./src/runtime/internal/client/index.js"
     },
+    "./internal/server": {
+      "default": "./src/runtime/internal/server/index.js"
+    },
     "./jsx-runtime": {
       "types": "./src/jsx-runtime.d.ts",
       "import": "./src/jsx-runtime.js",

package/src/compiler/index.js

@@ -1,25 +1,42 @@
+/** @import { RawSourceMap } from 'source-map' */
+/** @import { Program } from 'estree' */
+/** @import { ParseError } from './phases/1-parse/index.js' */
+
 import { parse as parse_module } from './phases/1-parse/index.js';
 import { analyze } from './phases/2-analyze/index.js';
-import { transform } from './phases/3-transform/index.js';
+import { transform_client } from './phases/3-transform/client/index.js';
+import { transform_server } from './phases/3-transform/server/index.js';
 import { convert_source_map_to_mappings } from './phases/3-transform/segments.js';
 
+/**
+ * @param {string} source 
+ * @returns {{ ast: Program, errors: ParseError[] }}
+ */
 export function parse(source) {
-	return parse_module(source);
+  return parse_module(source);
 }
 
-export function compile(source, filename) {
-	const ast = parse_module(source);
-	const analysis = analyze(ast, filename);
-	const result = transform(filename, source, analysis, false);
+/**
+ * @param {string} source 
+ * @param {string} filename 
+ * @param {{ environment?: 'client' | 'server' }} options 
+ * @returns {{ js: { code: string, map: RawSourceMap }, css: { code: string, map: RawSourceMap } | null }}
+ */
+export function compile(source, filename, options = {}) {
+  const ast = parse_module(source);
+  const analysis = analyze(ast, filename);
+  const result = options.environment === 'server'
+      ? transform_server(filename, source, analysis)
+      : transform_client(filename, source, analysis, false);
 
-	return result;
+  return result;
 }
 
 export function compile_to_volar_mappings(source, filename) {
-	// Parse and transform to get the esrap sourcemap
-	const ast = parse_module(source);
-	const analysis = analyze(ast, filename);
-	const transformed = transform(filename, source, analysis, true);
+  // Parse and transform to get the esrap sourcemap
+  const ast = parse_module(source);
+  const analysis = analyze(ast, filename);
+  const transformed = transform_client(filename, source, analysis, true);
 
-	return convert_source_map_to_mappings(transformed.js.map, source, transformed.js.code);
+  return convert_source_map_to_mappings(transformed.js.map, source, transformed.js.code);
 }

package/src/compiler/phases/3-transform/{index.js → client/index.js}

@@ -2,15 +2,15 @@ import { walk } from 'zimmerframe';
 import path from 'node:path';
 import { print } from 'esrap';
 import tsx from 'esrap/languages/tsx';
-import * as b from '../../../utils/builders.js';
+import * as b from '../../../../utils/builders.js';
 import {
   IS_CONTROLLED,
   IS_INDEXED,
   TEMPLATE_FRAGMENT,
   TEMPLATE_SVG_NAMESPACE,
   TEMPLATE_MATHML_NAMESPACE,
-} from '../../../constants.js';
-import { sanitize_template_string } from '../../../utils/sanitize_template_string.js';
+} from '../../../../constants.js';
+import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
 import {
   build_hoisted_params,
   is_inside_component,
@@ -27,11 +27,11 @@ import {
   is_element_dom_element,
   is_top_level_await,
   is_ripple_track_call,
-} from '../../utils.js';
+} from '../../../utils.js';
 import is_reference from 'is-reference';
-import { object } from '../../../utils/ast.js';
-import { render_stylesheets } from './stylesheet.js';
-import { is_event_attribute, is_passive_event } from '../../../utils/events.js';
+import { object } from '../../../../utils/ast.js';
+import { render_stylesheets } from '../stylesheet.js';
+import { is_event_attribute, is_passive_event } from '../../../../utils/events.js';
 
 function add_ripple_internal_import(context) {
   if (!context.state.to_ts) {
@@ -65,7 +65,11 @@ function visit_function(node, context) {
     });
   }
 
-  let body = context.visit(node.body, state);
+  let body = context.visit(node.body, {
+    ...state,
+    // we are new context so tracking no longer applies
+    metadata: { ...state.metadata, tracked: false },
+  });
 
   if (metadata?.tracked === true) {
     const new_body = [];
@@ -1663,7 +1667,7 @@ function transform_body(body, { visit, state }) {
   return [...body_state.setup, ...body_state.init, ...body_state.final];
 }
 
-export function transform(filename, source, analysis, to_ts) {
+export function transform_client(filename, source, analysis, to_ts) {
   const state = {
     imports: new Set(),
     events: new Set(),
@@ -1700,16 +1704,10 @@ export function transform(filename, source, analysis, to_ts) {
     );
   }
 
-  const js = print(
-    program,
-    tsx({
-      comments: analysis.ast.comments || [],
-    }),
-    {
-      sourceMapContent: source,
-      sourceMapSource: path.basename(filename),
-    },
-  );
+  const js = print(program, tsx(), {
+    sourceMapContent: source,
+    sourceMapSource: path.basename(filename),
+  });
 
   const css = render_stylesheets(state.stylesheets);
 

package/src/compiler/phases/3-transform/server/index.js

@@ -0,0 +1,95 @@
+import * as b from '../../../../utils/builders.js';
+import { walk } from 'zimmerframe';
+import ts from 'esrap/languages/ts';
+import path from 'node:path';
+import { print } from 'esrap';
+
+function add_ripple_internal_import(context) {
+  if (!context.state.to_ts) {
+    if (!context.state.imports.has(`import * as _$_ from 'ripple/internal/server'`)) {
+      context.state.imports.add(`import * as _$_ from 'ripple/internal/server'`);
+    }
+  }
+}
+
+function transform_body(body, { visit, state }) {
+  const body_state = {
+    ...state,
+    init: [],
+    metadata: state.metadata,
+  };
+
+  return body_state.init;
+}
+
+const visitors = {
+  _: function set_scope(node, { next, state }) {
+    const scope = state.scopes.get(node);
+
+    if (scope && scope !== state.scope) {
+      return next({ ...state, scope });
+    } else {
+      return next();
+    }
+  },
+
+  Component(node, context) {
+    add_ripple_internal_import(context);
+
+    const metadata = { await: false };
+    const body_statements = [
+      b.stmt(b.call('_$_.push_component')),
+      ...transform_body(node.body, {
+        ...context,
+        state: { ...context.state, component: node, metadata },
+      }),
+      b.stmt(b.call('_$_.pop_component')),
+    ];
+
+    if (node.css !== null && node.css) {
+      context.state.stylesheets.push(node.css);
+    }
+
+    return b.function(
+      node.id,
+      node.params.length > 0 ? [b.id('__output'), node.params[0]] : [b.id('__output')],
+      b.block([
+        ...(metadata.await
+          ? [b.stmt(b.call('_$_.async', b.thunk(b.block(body_statements), true)))]
+          : body_statements),
+      ]),
+    );
+  },
+};
+
+export function transform_server(filename, source, analysis) {
+  const state = {
+    imports: new Set(),
+    init: null,
+    scope: analysis.scope,
+    scopes: analysis.scopes,
+    stylesheets: [],
+  };
+
+  const program = /** @type {ESTree.Program} */ (
+    walk(analysis.ast, { ...state, namespace: 'html' }, visitors)
+  );
+
+  for (const import_node of state.imports) {
+    program.body.unshift(b.stmt(b.id(import_node)));
+  }
+
+  const js = print(program, ts(), {
+    sourceMapContent: source,
+    sourceMapSource: path.basename(filename),
+  });
+
+  // TODO: extract css
+  const css = '';
+
+  return {
+    ast: program,
+    js,
+    css,
+  };
+}

package/src/runtime/internal/client/for.js

@@ -210,10 +210,9 @@ function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
               sources[j - b_start] = i + 1;
               if (fast_path_removal) {
                 fast_path_removal = false;
-                // while (a_start < i) {
-                //     debugger
-                //     destroy_block(a_blocks[a_start++]);
-                // }
+                while (a_start < i) {
+                  destroy_block(a_blocks[a_start++]);
+                }
               }
               if (pos > j) {
                 moved = true;

package/src/runtime/internal/server/index.js

@@ -0,0 +1,40 @@
+
+class Output {
+    head = '';
+    body = '';
+    #parent = null;
+
+    constructor(parent) {
+        this.#parent = parent;
+    }
+
+    push(str) {
+        this.body += str;
+    }
+}
+
+export async function renderToString(component) {
+    const output = new Output(null);
+
+    if (component.async) {
+        await component(output, {});
+    } else {
+        component(output, {});
+    }
+
+    const { head, body } = output;
+
+    return { head, body };
+}
+
+export function push_component() {
+    debugger;
+}
+
+export function pop_component() {
+    debugger;
+}
+
+export async function async(fn) {
+    // TODO
+}

package/src/server/index.js

@@ -0,0 +1 @@
+export { renderToString } from '../runtime/internal/server/index.js';

package/tests/{array.test.ripple → client/array.test.ripple}

@@ -1,6 +1,6 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { mount, flushSync, effect, untrack, TrackedArray, track } from 'ripple';
-import { MAX_ARRAY_LENGTH } from '../src/runtime/internal/client/constants.js';
+import { MAX_ARRAY_LENGTH } from '../../src/runtime/internal/client/constants.js';
 
 describe('TrackedArray', () => {
 	let container;