Hello World
3 | 4 | 5 | -------------------------------------------------------------------------------- /src/bundle/others.ts: -------------------------------------------------------------------------------- 1 | /** Contains alternative runtime function implementations */ 2 | 3 | import { Component } from "./component"; 4 | import { oE } from "./render"; 5 | 6 | /** 7 | * Minified h render function + no svg support 8 | * @param tn 9 | * @param a 10 | * @param v 11 | * @param c 12 | */ 13 | function h(tn: string, a: Object | 0 = 0, v: Object | 0 = 0, ...c: ArraySome text
44 | 47 | 52 | 53 | ``` 54 | 55 | ```js 56 | > const [h1, script, style] = HTMLElement.fromString(...).children; 57 | > h1.children[0].text 58 | > "Some Text" 59 | > script.module 60 | > Module {...} 61 | > style.stylesheet 62 | > Stylesheet {...} 63 | ``` 64 | 65 | #### Speed comparisons: 66 | 67 | Through some rough testing Chef with `@babel/parsing` and `@babel/generator` Chef appears 2x times faster parsing and 6x faster at serializing the AST to a string. 68 | 69 | #### JS coverage & testing: 70 | 71 | Chef is not built alongside the spec so there are several things that are missed. Notably less used language features with statements, blocks, label statements, deep destructuring. But the tests have a good coverage over most used syntax. Just like Prism, Chef is experimental so getting it working is a greater priority than producing a production stage parser and renderer. I am hoping to using a external test set (such as [test262](https://github.com/tc39/test262)) for Chef to be more stable. 72 | 73 | #### Utilities: 74 | 75 | There are several non parsing based utilities included in Chef. 76 | 77 | - `javascript/utils/variables.ts` 78 | - Finding variables: returns list of variables in a construct 79 | - Aliasing variables: prefixes variables. e.g. `x` ➡ `this.data.x` 80 | - Replacing variables: replaces variables with any `IValue`. Effectively substitution 81 | - `javascript/utils/types.ts` : Resolves types by following references. Will return a map of properties that a type has 82 | - `javascript/utils/reverse.ts` : Attempts to create a function that resolve the variables used to construct the final value 83 | 84 | #### TypeScript 85 | 86 | Chef includes a lot of TypeScript syntax such as interfaces, type signatures (variables, parameters, function return types), decorators and generic parameters. Type constraints and some other syntax is not implemented. Chef also does not do any type checking. 87 | 88 | Compiling a node with the `settings.scriptLanguage` value will only output JS. And as TypeScript is a superset of JS removing TypeScript syntax returns valid JS code. 89 | 90 | #### Nested CSS rules: 91 | 92 | The CSS parser can process nested rules similar to scss (inc `&` for referencing the current selector): 93 | 94 | ```scss 95 | div { 96 | h1 { 97 | color: red; 98 | } 99 | 100 | &.class1 { 101 | h2 { 102 | text-align: center; 103 | } 104 | } 105 | } 106 | ``` 107 | 108 | Will be compiled to: 109 | 110 | ```css 111 | div h1 { 112 | color: red; 113 | } 114 | 115 | div.class1 h2 { 116 | text-align: center; 117 | } 118 | ``` 119 | 120 | (expanding nested rules is done as parse time) 121 | 122 | #### Dynamic URLs: 123 | 124 | Chef also can process URL syntax with variables similar to that of express: Minor addition that Prism uses 125 | 126 | ```js 127 | > const dynamicUrl = stringToDynamicUrl("/users/:userID"); 128 | // dynamicUrlToRegexPattern will produce a RegExpr that will only match on valid URLs and will return a groups of arguments 129 | > dynamicUrlToRegexPattern(dynamicUrl) 130 | > RegExpLiteral { 131 | expression: "^\\/users\\/(?
35 | rawInnerHTML: ValueTypes, // Raw (unescaped) innerHTML value
36 |
37 | // A expression that has to return a truthy value to render (also used for determine that it was a #if node)
38 | conditionalExpression: ValueTypes,
39 | // A expression that is used for iteration over children (also used for determine that it was a #for node)
40 | iteratorExpression: ForIteratorExpression,
41 |
42 | // A method that renders itself or its children, used for #if and #for node
43 | clientRenderMethod: FunctionDeclaration,
44 |
45 | elseElement: HTMLElement, // If #if points to the #else element
46 |
47 | // For TextNodes:
48 | textNodeValue: ValueTypes; // A expression value for its text content
49 | // For HTMLComments:
50 | isFragment: true // If the comment is used to break up text nodes for ssr hydration
51 | }
52 |
53 | export type NodeData = Partial;
54 |
55 | // Explains what a variable affects
56 | export enum BindingAspect {
57 | Attribute, // Affects a specific attribute of a node
58 | Data, // A components data
59 | InnerText, // Affects the inner text value of a node
60 | InnerHTML, // Affects raw inner HTML
61 | Iterator, // Affects the number of a children under a node / iterator
62 | Conditional, // Affects if a node is rendered TODO not visible but exists
63 | DocumentTitle, // Affects the document title
64 | SetHook, // Hook to method on a class
65 | Style, // A css style
66 | ServerParameter // Used in referencing the
67 | }
68 |
69 | // Represents a link between data and a element
70 | export interface IBinding {
71 | expression: ValueTypes | ForLoopExpression, // The expression that is the mutation of the variable
72 | aspect: BindingAspect, // The aspect the variable affects
73 | element?: HTMLElement, // The element that is around the binding. Used to see if the element is multiple or nullable
74 | fragmentIndex?: number, // The index of the fragment to edit
75 | attribute?: string, // If aspect is a attribute then the name of the attribute
76 | styleKey?: string, //
77 | referencesVariables: Array,
78 | }
79 |
80 | export type PartialBinding = Omit;
81 |
82 | export interface ForLoopVariable {
83 | aspect: "*",
84 | alias: string,
85 | origin: HTMLElement
86 | }
87 |
88 | export type VariableReferenceArray = Array;
89 | export type Locals = Array<{ name: string, path: VariableReferenceArray }>;
90 |
91 | export interface ITemplateData {
92 | slots: Map,
93 | nodeData: WeakMap
94 | bindings: Array,
95 | events: Array,
96 | hasSVG: boolean
97 | }
98 |
99 | export interface ITemplateConfig {
100 | staticSrc: string,
101 | ssrEnabled: boolean,
102 | tagNameToComponentMap: Map,
103 | doClientSideRouting: boolean
104 | }
105 |
106 | /**
107 | * Parse the element and its children. TODO explain
108 | * @param templateElement A root element
109 | * @param component The component that the template exists under
110 | */
111 | export function parseTemplate(
112 | templateElement: HTMLElement,
113 | templateConfig: ITemplateConfig,
114 | locals: Array = [],
115 | ): ITemplateData {
116 | if (templateElement.tagName !== "template") {
117 | throw Error("Element must be of tag name template");
118 | }
119 |
120 | const templateData: ITemplateData = {
121 | slots: new Map(),
122 | bindings: [],
123 | events: [],
124 | nodeData: new WeakMap(),
125 | hasSVG: false
126 | }
127 |
128 | for (const child of templateElement.children) {
129 | parseNode(child, templateData, templateConfig, locals);
130 | }
131 |
132 | return templateData;
133 | }
134 |
135 | /**
136 | * Mutates all elements:
137 | * - Adds event listeners to nodes with event binding attributes
138 | * - Splits up text node with multiple variables to assist with ssr extraction
139 | */
140 | export function parseNode(
141 | element: Node,
142 | templateData: ITemplateData,
143 | templateConfig: ITemplateConfig,
144 | locals: Array, // TODO eventually remove
145 | localData: Locals = [],
146 | nullable = false,
147 | multiple = false,
148 | ): void {
149 | if (element instanceof HTMLElement) {
150 | parseHTMLElement(element, templateData, templateConfig, locals, localData, nullable, multiple);
151 | } else if (element instanceof TextNode) {
152 | parseTextNode(element, templateData, templateConfig, locals, localData, multiple);
153 | }
154 | }
--------------------------------------------------------------------------------
/src/templating/text-node.ts:
--------------------------------------------------------------------------------
1 | import { BindingAspect, Locals, PartialBinding, ITemplateData, ITemplateConfig } from "./template";
2 | import { ValueTypes } from "../chef/javascript/components/value/value";
3 | import { Expression, VariableReference } from "../chef/javascript/components/value/expression";
4 | import { HTMLComment, TextNode } from "../chef/html/html";
5 | import { addIdentifierToElement, addBinding } from "./helpers";
6 | import { assignToObjectMap } from "../helpers";
7 |
8 | export function parseTextNode(
9 | textNode: TextNode,
10 | templateData: ITemplateData,
11 | templateConfig: ITemplateConfig,
12 | locals: Array,
13 | localData: Locals,
14 | multiple: boolean = false,
15 | ): void {
16 | // TODO what about "Hello {name(x: {})}"; Uhh? Maybe alternative to regex?
17 | const text = textNode.text.split(/{(.+?)}/g);
18 |
19 | // Should never throw
20 | if (!textNode.parent) {
21 | throw Error("Found text node without parent");
22 | }
23 |
24 | // If no instances of {...} return;
25 | if (text.length <= 1) {
26 | return;
27 | }
28 |
29 | const fragments: Array = []
30 | for (let i = 0; i < text.length; i++) {
31 | if (i % 2 === 0) {
32 | if (text[i] !== "") {
33 | fragments.push(text[i]);
34 | }
35 | } else {
36 | try {
37 | let expression = Expression.fromString(text[i])
38 | fragments.push(expression);
39 | } catch (error) {
40 | throw Error(`Error parsing interpolated text "{${text[i]}}" ${error}`);
41 | }
42 | }
43 | }
44 |
45 | // This does account for previous text nodes being split up
46 | const offset = textNode.parent.children.indexOf(textNode);
47 |
48 | if (!multiple) {
49 | addIdentifierToElement(textNode.parent, templateData.nodeData);
50 | }
51 |
52 | const insertedChildren: Array = [];
53 |
54 | for (let i = 0; i < fragments.length; i++) {
55 | const fragment = fragments[i];
56 | if (typeof fragment === "string") {
57 | const staticTextNode = new TextNode(fragment, textNode.parent);
58 | insertedChildren.push(staticTextNode)
59 | } else {
60 | const dynamicTextNode: TextNode = new TextNode("", textNode.parent);
61 | assignToObjectMap(templateData.nodeData, dynamicTextNode, "textNodeValue", fragment)
62 |
63 | const bindings: PartialBinding = {
64 | aspect: BindingAspect.InnerText,
65 | element: textNode.parent,
66 | expression: fragment,
67 | // Under SSR comments are needed to create text nodes,
68 | // therefore the text nodes are every other index and the need for *2
69 | fragmentIndex: (templateConfig.ssrEnabled ? i * 2 : i) + offset
70 | }
71 |
72 | addBinding(bindings, localData, locals, templateData.bindings);
73 | insertedChildren.push(dynamicTextNode);
74 | }
75 |
76 | // Comments are required to be inserted to separated text nodes during ssr
77 | if (i + 1 < fragments.length && templateConfig.ssrEnabled) {
78 | const comment = new HTMLComment(textNode.parent!);
79 | assignToObjectMap(templateData.nodeData, comment, "isFragment", true);
80 | insertedChildren.push(comment);
81 | }
82 | }
83 |
84 | textNode.parent.children.splice(textNode.parent.children.indexOf(textNode), 1, ...insertedChildren);
85 | }
--------------------------------------------------------------------------------
/src/web.ts:
--------------------------------------------------------------------------------
1 | export { registerFSReadCallback, registerFSCopyCallback, registerFSExistsCallback, registerFSWriteCallback } from "./filesystem";
2 | export { compileComponent, compileComponentFromFSMap, compileComponentFromFSObject, compileSingleComponentFromString } from "./builders/compile-component";
3 | export { compileApplication } from "./builders/compile-app";
4 | export { prismVersion } from "./bundled-files";
--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kaleidawave/prism/2b1350ba1f16bdc9bfcd795a62b423d9cf56e423/static/logo.png
--------------------------------------------------------------------------------
/tests/chef/html/html.render.test.ts:
--------------------------------------------------------------------------------
1 | import { HTMLElement, TextNode } from "../../../src/chef/html/html";
2 | import { makeRenderSettings } from "../../../src/chef/helpers";
3 | import { Module } from "../../../src/chef/javascript/components/module";
4 | import { Expression, Operation } from "../../../src/chef/javascript/components/value/expression";
5 | import { Value, Type } from "../../../src/chef/javascript/components/value/value";
6 | import { Stylesheet } from "../../../src/chef/css/stylesheet";
7 | import { Rule } from "../../../src/chef/css/rule";
8 |
9 | const minificationSettings = makeRenderSettings({ minify: true });
10 |
11 | test("Renders tag", () => {
12 | const element = new HTMLElement("h1");
13 | expect(element.render()).toBe("");
14 | });
15 |
16 | test("Renders self closing tag", () => {
17 | const element = new HTMLElement("img");
18 | expect(element.render()).toBe("![]()
");
19 | });
20 |
21 | test("Renders attributes", () => {
22 | const element = new HTMLElement("h1", new Map([["class", "red"]]));
23 | expect(element.render()).toBe(``);
24 | });
25 |
26 | test("Renders boolean attribute", () => {
27 | const element = new HTMLElement("h1", new Map([["hidden", null]]));
28 | expect(element.render()).toBe(``);
29 | });
30 |
31 | test("Renders children", () => {
32 | const element = new HTMLElement("div", null, [
33 | new HTMLElement("h1")
34 | ]);
35 |
36 | expect(element.render(minificationSettings)).toBe("![]()
`;
46 | const element = HTMLElement.fromString(template);
47 | const { nodeData } = parseTemplate(element, templateConfig);
48 | (element.children[0] as HTMLElement).attributes!.delete("class"); // Temp removal of identifer
49 | const componentRenderMethod = buildClientRenderMethod(element, nodeData, true);
50 | expect(componentRenderMethod.render(minifiedSettings))
51 | .toBe(`function* render(){yield h("img",{src:this.data.someImage},0)}`);
52 | });
53 |
54 | test("InnerHtml", () => {
55 | const template = ``;
56 | const element = HTMLElement.fromString(template);
57 | const { nodeData } = parseTemplate(element, templateConfig);
58 | (element.children[0] as HTMLElement).attributes!.delete("class"); // Temp removal of identifer
59 | const componentRenderMethod = buildClientRenderMethod(element, nodeData, true);
60 | expect(componentRenderMethod.render(minifiedSettings))
61 | .toBe(`function* render(){yield h("p",{innerHTML:this.data.html},0)}`);
62 | });
63 |
64 | test("Events", () => {
65 | const template = ``;
66 | const element = HTMLElement.fromString(template);
67 | const { nodeData } = parseTemplate(element, templateConfig);
68 | (element.children[0] as HTMLElement).attributes!.delete("class"); // Temp removal of identifer
69 | const componentRenderMethod = buildClientRenderMethod(element, nodeData, true);
70 | expect(componentRenderMethod.render(minifiedSettings))
71 | .toBe(`function* render(){yield h("button",0,{click:this.someEvent.bind(this)})}`);
72 | });
73 |
74 | test("Text", () => {
75 | const template = `![]()
`)
44 | });
45 |
46 | test.todo("Conditional");
47 | test.todo("Iterator");
48 | test.todo("Calling");
49 | test.todo("Comments");
--------------------------------------------------------------------------------
/tests/templating/templating.test.ts:
--------------------------------------------------------------------------------
1 | import { HTMLElement } from "../../src/chef/html/html";
2 |
3 | describe("Text nodes", () => {
4 |
5 | });
6 |
7 | test.skip("Dynamic attributes", () => {
8 | const element = HTMLElement.fromString(``);
9 | // parseTemplate(element);
10 | // const h1 = element.children[0] as PrismHTMLElement;
11 | // expect(h1.dynamicAttributes).toBeTruthy();
12 | // expect(h1.dynamicAttributes!.has("title")).toBeTruthy();
13 | // expect(h1.dynamicAttributes!.get("title")).toMatchObject(new VariableReference("x"));
14 | });
15 |
16 | test.todo("Slot");
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["es2020", "es2019.array"],
4 | "target": "ES6",
5 | "module": "CommonJS",
6 | "moduleResolution": "node",
7 | "experimentalDecorators": true,
8 | "types": [ "node", "jest" ],
9 | "removeComments": true,
10 | "incremental": true,
11 | "strictNullChecks": true,
12 | "listEmittedFiles": false,
13 | "diagnostics": false,
14 | "downlevelIteration": true,
15 | "tsBuildInfoFile": "private/tsbuild.info.json",
16 | "declaration": true,
17 | "declarationDir": "dts",
18 | "outDir": "dts",
19 | "noEmit": false,
20 | "resolveJsonModule": false
21 | },
22 | "files": [
23 | "src/cli.ts",
24 | ],
25 | "exclude": [
26 | "node_modules",
27 | "**/node_modules/*",
28 | "src/bundle/*",
29 | "tests/*",
30 | "private/*"
31 | ]
32 | }
--------------------------------------------------------------------------------
");
37 | });
38 |
39 | test("Renders children text nodes", () => {
40 | const element = new HTMLElement("h1", null, [
41 | new TextNode("Hello World")
42 | ]);
43 |
44 | expect(element.render(minificationSettings)).toBe("
Hello World
"); 45 | }); 46 | 47 | test("Renders modules", () => { 48 | const scriptElement = new HTMLElement("script"); 49 | scriptElement.module = new Module("", [ 50 | new Expression({ 51 | lhs: new Value(Type.number, "3"), 52 | operation: Operation.Add, 53 | rhs: new Value(Type.number, "5") 54 | }) 55 | ]); 56 | 57 | expect(scriptElement.render(minificationSettings)).toBe(""); 58 | }); 59 | 60 | test("Renders stylesheet", () => { 61 | const styleElement = new HTMLElement("style"); 62 | styleElement.stylesheet = new Stylesheet("", [ 63 | new Rule( 64 | [{tagName: "h1"}], 65 | new Map([["color", [{value: "red"}]]]) 66 | ) 67 | ]); 68 | 69 | expect(styleElement.render(minificationSettings)).toBe(""); 70 | }); 71 | 72 | test("Self closing elements", () => { 73 | const circleNode = new HTMLElement("circle", new Map([["r", "50"]]), undefined, undefined, undefined, true); 74 | expect(circleNode.render()).toBe(`Hello World
`; 76 | const element = HTMLElement.fromString(template); 77 | const { nodeData } = parseTemplate(element, templateConfig); 78 | const componentRenderMethod = buildClientRenderMethod(element, nodeData, true); 79 | expect(componentRenderMethod.render(minifiedSettings)) 80 | .toBe(`function* render(){yield h("h1",0,0,"Hello World")}`); 81 | }); 82 | }); -------------------------------------------------------------------------------- /tests/templating/event.test.ts: -------------------------------------------------------------------------------- 1 | import { ITemplateConfig, parseTemplate } from "../../src/templating/template"; 2 | import { HTMLElement } from "../../src/chef/html/html"; 3 | 4 | const templateConfig: ITemplateConfig = { 5 | doClientSideRouting: false, 6 | tagNameToComponentMap: new Map, 7 | ssrEnabled: false, 8 | staticSrc: "/" 9 | } 10 | 11 | test("Events", () => { 12 | const template = ` 13 | 14 | `; 15 | 16 | const templateElement = HTMLElement.fromString(template); 17 | 18 | const { events } = parseTemplate(templateElement, templateConfig); 19 | 20 | expect(events.length).toBe(1); 21 | expect(events[0].element).toBe(templateElement.children[0]); 22 | expect(events[0].eventName).toBe("click"); 23 | expect(events[0].callback.name).toBe("doThing"); 24 | }); -------------------------------------------------------------------------------- /tests/templating/runtime-feature-detection.test.ts: -------------------------------------------------------------------------------- 1 | import { join } from "path"; 2 | import { IRuntimeFeatures } from "../../src/builders/prism-client"; 3 | import { Component } from "../../src/component"; 4 | import { makePrismSettings } from "../../src/settings"; 5 | 6 | const falseRuntimeSettings: IRuntimeFeatures = Object.freeze({ 7 | conditionals: false, 8 | isomorphic: false, 9 | observableArrays: false, 10 | subObjects: false, 11 | svg: false 12 | }); 13 | 14 | const defaultSettings = makePrismSettings(process.cwd(), { context: "client" }); 15 | 16 | test("observableArrays", async () => { 17 | const runtimeFeatures = { ...falseRuntimeSettings }; 18 | await Component.registerComponent(join(__dirname, "../../examples/primitives/post.prism"), defaultSettings, runtimeFeatures); 19 | 20 | expect(runtimeFeatures).toMatchObject({ 21 | ...falseRuntimeSettings, 22 | observableArrays: true, 23 | subObjects: true 24 | }); 25 | }); 26 | 27 | test("conditionals", async () => { 28 | const runtimeFeatures = { ...falseRuntimeSettings }; 29 | await Component.registerComponent(join(__dirname, "../../examples/primitives/conditional.prism"), defaultSettings, runtimeFeatures); 30 | 31 | expect(runtimeFeatures).toMatchObject({ 32 | ...falseRuntimeSettings, 33 | conditionals: true 34 | }); 35 | }); 36 | 37 | test("svg", async () => { 38 | const runtimeFeatures = { ...falseRuntimeSettings }; 39 | await Component.registerComponent(join(__dirname, "../../examples/primitives/svg.prism"), defaultSettings, runtimeFeatures); 40 | 41 | expect(runtimeFeatures).toMatchObject({ 42 | ...falseRuntimeSettings, 43 | svg: true 44 | }); 45 | }); 46 | 47 | test("subObjects", async () => { 48 | const runtimeFeatures = { ...falseRuntimeSettings }; 49 | await Component.registerComponent(join(__dirname, "../../examples/primitives/objects.prism"), defaultSettings, runtimeFeatures); 50 | 51 | expect(runtimeFeatures).toMatchObject({ 52 | ...falseRuntimeSettings, 53 | subObjects: true 54 | }); 55 | }); -------------------------------------------------------------------------------- /tests/templating/server-side-render.test.ts: -------------------------------------------------------------------------------- 1 | import { IServerRenderSettings, serverRenderPrismNode } from "../../src/templating/builders/server-render"; 2 | import { HTMLElement, TextNode } from "../../src/chef/html/html"; 3 | import { VariableReference } from "../../src/chef/javascript/components/value/expression"; 4 | import { assignToObjectMap } from "../../src/helpers"; 5 | 6 | const serverRenderSettings: IServerRenderSettings = { addDisableToElementWithEvents: false, minify: true }; 7 | 8 | test("Tag and text", () => { 9 | const dom = new HTMLElement("div"); 10 | dom.children = [ 11 | new TextNode("Hello World", dom) 12 | ]; 13 | expect(serverRenderPrismNode(dom, new WeakMap, serverRenderSettings)[0]).toBe("Hello World
");
14 | expect(serverRenderPrismNode(dom, new WeakMap, serverRenderSettings)[0]).toBe("Hello World
");
15 | });
16 |
17 | test("Attributes", () => {
18 | const dom = new HTMLElement("div", new Map());
19 | dom.attributes!.set("title", "abc");
20 | dom.attributes!.set("id", "123");
21 | dom.attributes!.set("hidden", null);
22 |
23 | expect(serverRenderPrismNode(dom, new WeakMap, serverRenderSettings)[0]).toBe(``);
24 | });
25 |
26 | test("Dynamic Attributes", () => {
27 | const div = new HTMLElement("div");
28 | const nodeData = new WeakMap;
29 | assignToObjectMap(nodeData, div, "dynamicAttributes", new Map([["title", new VariableReference("someTitle")]]))
30 |
31 | expect(serverRenderPrismNode(div, nodeData, serverRenderSettings)).toMatchObject([
32 | ``
38 | ]);
39 | });
40 |
41 | test("Self closing tags", () => {
42 | const element = new HTMLElement("img");
43 | expect(serverRenderPrismNode(element, new WeakMap, serverRenderSettings)[0]).toBe(`