[ { "path": ".clippy.toml", "content": "disallowed-methods = [\n { path = \"str::to_ascii_lowercase\", reason = \"To avoid memory allocation, use `cow_utils::CowUtils::cow_to_ascii_lowercase` instead.\" },\n { path = \"str::to_ascii_uppercase\", reason = \"To avoid memory allocation, use `cow_utils::CowUtils::cow_to_ascii_uppercase` instead.\" },\n { path = \"str::to_lowercase\", reason = \"To avoid memory allocation, use `cow_utils::CowUtils::cow_to_lowercase` instead.\" },\n { path = \"str::to_uppercase\", reason = \"To avoid memory allocation, use `cow_utils::CowUtils::cow_to_uppercase` instead.\" },\n { path = \"str::replace\", reason = \"To avoid memory allocation, use `cow_utils::CowUtils::cow_replace` instead.\" },\n { path = \"str::replacen\", reason = \"To avoid memory allocation, use `cow_utils::CowUtils::cow_replacen` instead.\" },\n]\n" }, { "path": ".editorconfig", "content": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.{mts,ts,js,mjs}]\nindent_style = space\nindent_size = 2\n\n[*.{css}]\nindent_style = space\nindent_size = 2\n\n[*.{json,yml,yaml}]\nindent_style = space\nindent_size = 2\n\n[*.{md}]\nindent_style = space\nindent_size = 2\n" }, { "path": ".gitattributes", "content": "* text=auto\n\n*.sh text eol=lf merge=union\n*.rs text eol=lf merge=union\n*.js text eol=lf merge=union\n*.mjs text eol=lf merge=union\n*.ts text eof=lf merge=union\n*.mts text eof=lf merge=union\n*.toml text eol=lf merge=union\n*.json text eol=lf merge=union\n*.yaml text eol=lf merge=union\n*.yml text eol=lf merge=union\n*.md text eol=lf merge=union\n*.css text eol=lf merge=union\n*.html text eol=lf merge=union\n*.csv text eol=lf merge=union\n" }, { "path": ".github/renovate.json", "content": "{\n \"$schema\": \"https://docs.renovatebot.com/renovate-schema.json\",\n \"extends\": [\n \"config:recommended\",\n \"npm:unpublishSafe\",\n \":semanticCommits\"\n ],\n \"timezone\": \"Etc/UTC\",\n \"schedule\": [\n \"* 0-4 * * 1-3\"\n ],\n \"labels\": [\n \"dependencies\"\n ],\n \"commitMessagePrefix\": \"chore: \",\n \"commitMessageAction\": \"bump up\",\n \"commitMessageTopic\": \"{{depName}} version\",\n \"ignoreDeps\": [],\n \"packageRules\": [\n {\n \"groupName\": \"all non-major dependencies\",\n \"groupSlug\": \"all-minor-patch\",\n \"matchPackageNames\": [\n \"*\"\n ],\n \"matchUpdateTypes\": [\n \"minor\",\n \"patch\"\n ]\n },\n {\n \"groupName\": \"all devDependencies\",\n \"groupSlug\": \"all-dev-dependencies\",\n \"matchDepTypes\": [\n \"devDependencies\"\n ],\n \"rangeStrategy\": \"bump\"\n }\n ]\n}\n" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\nenv:\n ACTION_CACHE_PATH: |\n ~/.bun/install/cache\n node_modules/\npermissions:\n contents: write\n id-token: write\non:\n workflow_dispatch:\n inputs:\n publish:\n required: false\n type: boolean\n push:\n paths:\n - packages/**\n - bun.lock\n - \"!crates/**\"\n - \"!packages/@ivi/compiler/**\"\n - \"!tests/compiler/**\"\n branches:\n - master\n pull_request:\n paths:\n - packages/**\n - bun.lock\n - \"!crates/**\"\n - \"!packages/@ivi/compiler/**\"\n - \"!tests/compiler/**\"\n branches:\n - master\nconcurrency:\n group: ${{ github.workflow }}-${{ github.ref }}\n cancel-in-progress: true\njobs:\n publish:\n name: Publish\n if: \"${{ github.event_name != 'pull_request' && (inputs.publish || startsWith(github.event.head_commit.message, 'publish:')) }}\"\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n with:\n node-version: 24\n - uses: oven-sh/setup-bun@v2\n - uses: extractions/setup-just@v4\n - uses: actions/cache@v5\n with:\n path: ${{ env.ACTION_CACHE_PATH }}\n key: CI\n - run: just init\n - run: just tsc\n - name: Publish to NPM\n run: |\n npm config set provenance true\n echo \"//registry.npmjs.org/:_authToken=$NPM_TOKEN\" >> ~/.npmrc\n just publish --provenance --access public\n" }, { "path": ".github/workflows/napi-libraries.yml", "content": "name: NAPI Libraries\nenv:\n DEBUG: napi:*\n MACOSX_DEPLOYMENT_TARGET: \"10.13\"\n CARGO_INCREMENTAL: \"1\"\n ACTION_CACHE_PATH: |\n ~/.cargo/bin/\n ~/.cargo/registry/index/\n ~/.cargo/registry/cache/\n ~/.cargo/git/db/\n target/\n ~/.bun/install/cache\n node_modules/\npermissions:\n contents: write\n id-token: write\non:\n workflow_dispatch:\n inputs:\n publish:\n required: false\n type: boolean\n push:\n paths:\n - crates/**\n - packages/@ivi/compiler/**\n - tests/compiler/**\n - Cargo.lock\n branches:\n - master\n pull_request:\n paths:\n - crates/**\n - packages/@ivi/compiler/**\n - tests/compiler/**\n - Cargo.lock\n branches:\n - master\nconcurrency:\n group: ${{ github.workflow }}-${{ github.ref }}\n cancel-in-progress: true\njobs:\n build-napi:\n strategy:\n fail-fast: false\n matrix:\n settings:\n - host: ubuntu-latest\n target: x86_64-unknown-linux-gnu\n build: just napi build --release --target x86_64-unknown-linux-gnu --use-napi-cross\n - host: ubuntu-latest\n target: aarch64-unknown-linux-gnu\n build: just napi build --release --target aarch64-unknown-linux-gnu --use-napi-cross\n - host: macos-latest\n target: x86_64-apple-darwin\n build: just napi build --release --target x86_64-apple-darwin\n - host: macos-latest\n target: aarch64-apple-darwin\n build: just napi build --release --target aarch64-apple-darwin\n - host: windows-latest\n target: x86_64-pc-windows-msvc\n build: just napi build --release --target x86_64-pc-windows-msvc\n - host: windows-latest\n target: aarch64-pc-windows-msvc\n build: just napi build --release --target aarch64-pc-windows-msvc\n name: stable - ${{ matrix.settings.target }}\n runs-on: ${{ matrix.settings.host }}\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n with:\n node-version: 24\n - uses: oven-sh/setup-bun@v2\n - uses: extractions/setup-just@v4\n - uses: dtolnay/rust-toolchain@stable\n with:\n toolchain: stable\n targets: ${{ matrix.settings.target }}\n - uses: actions/cache@v5\n with:\n path: ${{ env.ACTION_CACHE_PATH }}\n key: NAPI-${{ matrix.settings.target }}-${{ matrix.settings.host }}\n - run: just init\n - run: ${{ matrix.settings.build }}\n - uses: actions/upload-artifact@v7\n with:\n name: NAPI-${{ matrix.settings.target }}\n path: ./packages/@ivi/compiler/ivi-compiler.*.node\n if-no-files-found: error\n test:\n name: Test bindings on ${{ matrix.settings.target }} - node@${{ matrix.node }}\n needs:\n - build-napi\n strategy:\n fail-fast: false\n matrix:\n settings:\n - host: ubuntu-latest\n target: x86_64-unknown-linux-gnu\n architecture: x64\n - host: ubuntu-24.04-arm\n target: aarch64-unknown-linux-gnu\n architecture: arm64\n - host: windows-latest\n target: x86_64-pc-windows-msvc\n architecture: x64\n # Bun doesn't have windows arm64 binaries\n # - host: windows-11-arm\n # target: aarch64-pc-windows-msvc\n # architecture: arm64\n - host: macos-latest\n target: aarch64-apple-darwin\n architecture: arm64\n # Bun is broken on x86_64 macos\n # - host: macos-latest\n # target: x86_64-apple-darwin\n # architecture: x64\n runs-on: ${{ matrix.settings.host }}\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n with:\n node-version: 24\n architecture: ${{ matrix.settings.architecture }}\n - uses: oven-sh/setup-bun@v2\n - uses: extractions/setup-just@v4\n - uses: actions/cache@v5\n with:\n path: ${{ env.ACTION_CACHE_PATH }}\n key: ${{ matrix.settings.target }}-${{ matrix.settings.host }}\n - run: just init\n if: steps.cache.outputs.cache-hit != 'true'\n - uses: actions/download-artifact@v8\n with:\n name: NAPI-${{ matrix.settings.target }}\n path: ./packages/@ivi/compiler/\n - run: just napi test\n publish:\n name: Publish\n if: \"${{ github.event_name != 'pull_request' && (inputs.publish || startsWith(github.event.head_commit.message, 'publish:')) }}\"\n runs-on: ubuntu-latest\n needs:\n - test\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n with:\n node-version: 24\n - uses: oven-sh/setup-bun@v2\n - uses: extractions/setup-just@v4\n - uses: actions/cache@v5\n with:\n path: ${{ env.ACTION_CACHE_PATH }}\n key: NAPI-x86_64-unknown-linux-gnu-ubuntu-latest\n - run: just init\n if: steps.cache.outputs.cache-hit != 'true'\n - uses: actions/download-artifact@v8\n with:\n pattern: NAPI-*\n path: napi-artifacts\n - run: just napi artifacts\n - name: Publish to NPM\n run: |\n npm config set provenance true\n echo \"//registry.npmjs.org/:_authToken=$NPM_TOKEN\" >> ~/.npmrc\n just napi publish --provenance --access public\n" }, { "path": ".github/workflows/napi-release.yml", "content": "name: NAPI Release\npermissions:\n contents: write\n id-token: write\non:\n workflow_dispatch:\n inputs:\n increment:\n type: choice\n required: true\n description: Increment version\n options: \n - patch\n - minor\n - major\njobs:\n publish:\n name: Release new @ivi/compiler version\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v6\n - uses: actions/setup-node@v6\n with:\n node-version: 24\n - uses: oven-sh/setup-bun@v2\n - uses: extractions/setup-just@v4\n - name: Increment versions and push changes\n run: |\n just napi increment-versions ${{ github.event.inputs.increment }}\n git config --global user.name \"GitHub Action\"\n git config --global user.email \"username@users.noreply.github.com\"\n git commit -a -m \"publish: @ivi/compiler $(jq -r .version ./packages/@ivi/compiler/package.json)\"\n git push\n" }, { "path": ".gitignore", "content": "/examples/**/dist\n/packages/**/dist\n/tests/dist\n\n.rsync-filter\n.DS_Store\n\n# Rust\n/target/\n\n# NAPI-rs\n/napi-artifacts/\n\n# JS\nnode_modules\n*.tsbuildinfo\nnpm-debug.log\n\n# Editors\n/.idea/\n/.vscode/\n!/.vscode/settings.json\n" }, { "path": ".rustfmt.toml", "content": "unstable_features = true\nversion = \"Two\"\nstyle_edition = \"2024\"\nedition = \"2024\"\nformat_strings = true\nformat_code_in_doc_comments = true\nhex_literal_case = \"Lower\"\nwrap_comments = true\nreorder_modules = true\nreorder_impl_items = true\nuse_field_init_shorthand = true\nuse_small_heuristics = \"Max\"\ngroup_imports = \"StdExternalCrate\"\nimports_granularity = \"Crate\"\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributing\n\n## Requirements\n\n- Bun\n- Just\n\n## Getting Started\n\n1. Clone the git repository: `git clone git@github.com:localvoid/ivi.git`\n2. Go into the cloned folder: `cd ivi/`\n3. Install all dependencies: `just init`\n\n## Tasks\n\n- `just init` - initializes development environment.\n- `just napi build` - builds NAPI bindings.\n- `just tsc` - builds typescript packages.\n- `just napi test` - runs NAPI tests.\n- `just test` - runs tests.\n" }, { "path": "Cargo.toml", "content": "[workspace]\nmembers = [\"crates/*\", \"packages/@ivi/compiler\"]\nresolver = \"3\"\n\n[workspace.dependencies]\nthiserror = \"2\"\nrustc-hash = \"2\"\nindexmap = \"2.10\"\noxc_allocator = \"0.121\"\noxc_ast = \"0.121\"\noxc_codegen = \"0.121\"\noxc_data_structures = \"0.121\"\noxc_diagnostics = \"0.121\"\noxc_ecmascript = \"0.121\"\noxc_parser = \"0.121\"\noxc_semantic = \"0.121\"\noxc_span = \"0.121\"\noxc_syntax = \"0.121\"\noxc_traverse = \"0.121\"\nnapi = \"3\"\nnapi-derive = \"3\"\nnapi-build = \"2\"\nivi_compiler = { path = \"./crates/ivi_compiler\" }\n\n[workspace.lints.clippy]\ndbg_macro = \"warn\"\ntodo = \"warn\"\nunimplemented = \"warn\"\nprint_stdout = \"warn\"\nprint_stderr = \"warn\"\nallow_attributes = \"warn\"\nclone_on_ref_ptr = \"warn\"\nself_named_module_files = \"warn\"\nempty_drop = \"warn\"\nempty_structs_with_brackets = \"warn\"\nexit = \"warn\"\nget_unwrap = \"warn\"\nrc_buffer = \"warn\"\nrc_mutex = \"warn\"\nrest_pat_in_fully_bound_structs = \"warn\"\nunnecessary_safety_comment = \"warn\"\nundocumented_unsafe_blocks = \"warn\"\ninfinite_loop = \"warn\"\nmap_with_unused_argument_over_ranges = \"warn\"\nunused_result_ok = \"warn\"\npathbuf_init_then_push = \"warn\"\ncollapsible_if = \"allow\"\ncollapsible_else_if = \"allow\"\ncollapsible_match = \"allow\"\n\n[profile.release]\nopt-level = 3\ncodegen-units = 1\nlto = \"fat\"\npanic = \"abort\"\nstrip = true\nsplit-debuginfo = \"packed\"\n\n[profile.dev]\ndebug = false\n\n[profile.release-with-debug]\ninherits = \"release\"\nstrip = false\ndebug = true\n\n[profile.coverage]\ninherits = \"release\"\nopt-level = 2\ncodegen-units = 256\nlto = \"thin\"\ndebug-assertions = true\noverflow-checks = true\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2016-2024 Boris Kaul .\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n" }, { "path": "crates/ivi_compiler/Cargo.toml", "content": "[package]\nname = \"ivi_compiler\"\nversion = \"0.1.0\"\nedition = \"2024\"\nauthors = [\"Boris Kaul \"]\nlicense = \"MIT\"\nhomepage = \"https://github.com/localvoid/ivi\"\nrepository = \"https://github.com/localvoid/ivi\"\ndescription = \"ivi template compiler\"\n\n[dependencies]\nthiserror.workspace = true\nrustc-hash.workspace = true\nindexmap.workspace = true\noxc_allocator.workspace = true\noxc_ast.workspace = true\noxc_codegen.workspace = true\noxc_data_structures.workspace = true\noxc_diagnostics.workspace = true\noxc_ecmascript.workspace = true\noxc_parser.workspace = true\noxc_semantic.workspace = true\noxc_span.workspace = true\noxc_syntax.workspace = true\noxc_traverse.workspace = true\n\n[lints]\nworkspace = true\n" }, { "path": "crates/ivi_compiler/src/chunk/mod.rs", "content": "use oxc_allocator::{Allocator, Vec as ArenaVec};\nuse oxc_ast::ast::*;\nuse oxc_semantic::Scoping;\nuse oxc_span::SPAN;\nuse oxc_traverse::{Traverse, traverse_mut};\nuse rustc_hash::FxHashMap;\n\nuse crate::{\n context::{TraverseCtx, TraverseCtxState},\n tpl::opcodes::prop_op,\n};\n\npub fn compile_chunk<'a>(\n program: &mut Program<'a>,\n allocator: &'a Allocator,\n scoping: Scoping,\n strings: &FxHashMap,\n) {\n let mut t = ChunkCompiler::new(strings);\n traverse_mut(&mut t, allocator, program, scoping, TraverseCtxState::default());\n}\n\nstruct ChunkCompiler<'ctx> {\n strings: &'ctx FxHashMap,\n}\n\nimpl<'ctx> ChunkCompiler<'ctx> {\n pub fn new(strings: &'ctx FxHashMap) -> Self {\n Self { strings }\n }\n}\n\nimpl<'a> Traverse<'a, TraverseCtxState<'a>> for ChunkCompiler<'_> {\n fn enter_expression(&mut self, node: &mut Expression<'a>, ctx: &mut TraverseCtx<'a>) {\n match node {\n Expression::ArrayExpression(expr) => {\n if expr.elements.len() == 1 {\n if let Some(Expression::StringLiteral(s)) = expr.elements[0].as_expression() {\n if s.value == STRINGS_UUID {\n let mut indexed: Vec<_> = self.strings.iter().collect();\n indexed.sort_by_key(|e| e.1);\n\n let mut strings = ctx.ast.vec_with_capacity(self.strings.len());\n for (s, _) in indexed {\n strings.push(ArrayExpressionElement::StringLiteral(\n ctx.ast.alloc_string_literal(SPAN, ctx.ast.atom(s), None),\n ));\n }\n *node = ctx.ast.expression_array(SPAN, strings);\n }\n }\n }\n }\n Expression::CallExpression(expr) => {\n if let Some(\"__IVI_TPL__\") = expr.callee_name() {\n if let Some(mut arg0) = expr.arguments.pop() {\n if let Some(Expression::CallExpression(call)) = arg0.as_expression_mut() {\n if call.arguments.len() > 5 {\n if let Some(Argument::ArrayExpression(tpl_strings)) =\n call.arguments.pop()\n {\n let prop_op_codes = &mut call.arguments[2];\n update_prop_op_codes(\n prop_op_codes.as_expression_mut().unwrap(),\n &tpl_strings.elements,\n self.strings,\n );\n }\n }\n *node = arg0.into_expression();\n }\n }\n }\n }\n _ => {}\n }\n }\n}\n\nfn update_prop_op_codes<'a>(\n expr: &mut Expression,\n tpl_strings: &ArenaVec<'a, ArrayExpressionElement<'a>>,\n strings: &FxHashMap,\n) {\n match expr {\n // dedupe(op_codes)\n Expression::CallExpression(c) => {\n if let Some(e) = c.arguments.get_mut(0).and_then(|a| a.as_expression_mut()) {\n update_prop_op_codes(e, tpl_strings, strings);\n }\n }\n Expression::ArrayExpression(a) => {\n for el in &mut a.elements {\n if let Some(Expression::NumericLiteral(op)) = el.as_expression_mut() {\n let v = op.value as u32;\n let ty = v & prop_op::TYPE_MASK;\n if ty != prop_op::SET_NODE && ty != prop_op::COMMON && ty != prop_op::DIRECTIVE\n {\n let i = v >> prop_op::DATA_SHIFT;\n let s = &tpl_strings[i as usize];\n if let ArrayExpressionElement::StringLiteral(s) = s {\n if let Some(new_index) = strings.get(s.value.as_str()) {\n op.value = ((v & ((1 << prop_op::DATA_SHIFT) - 1))\n | ((*new_index as u32) << prop_op::DATA_SHIFT))\n as f64;\n }\n }\n }\n }\n }\n }\n _ => {}\n }\n}\n\nconst STRINGS_UUID: &str = \"IVI:fa7327d9-0034-492d-bfdf-576548b2d9cc\";\n" }, { "path": "crates/ivi_compiler/src/context.rs", "content": "use std::marker::PhantomData;\n\npub type TraverseCtx<'a> = oxc_traverse::TraverseCtx<'a, TraverseCtxState<'a>>;\n\n#[derive(Default)]\npub struct TraverseCtxState<'a> {\n data: PhantomData<&'a ()>,\n}\n" }, { "path": "crates/ivi_compiler/src/import.rs", "content": "use oxc_ast::{\n NONE,\n ast::{\n Expression, ImportDeclarationSpecifier, ImportOrExportKind, ModuleExportName, Statement,\n },\n};\nuse oxc_semantic::SymbolFlags;\nuse oxc_span::SPAN;\nuse oxc_traverse::BoundIdentifier;\n\nuse crate::context::TraverseCtx;\n\n#[derive(Default)]\npub struct ImportSymbols<'a> {\n descriptor_id: Option>, // _T\n html_id: Option>, // _hN\n html_el_id: Option>, // _hE\n svg_id: Option>, // _sN\n svg_el_id: Option>, // _sE\n tpl_id: Option>, // _t\n empty_array_id: Option>, // _t\n\n hoist_id: Option>,\n dedupe_id: Option>,\n}\n\nimpl<'a> ImportSymbols<'a> {\n pub fn template_descriptor(&mut self, ctx: &mut TraverseCtx<'a>) -> Expression<'a> {\n get(&mut self.descriptor_id, \"_T\", ctx)\n }\n\n pub fn html_template(&mut self, ctx: &mut TraverseCtx<'a>) -> Expression<'a> {\n get(&mut self.html_id, \"_hN\", ctx)\n }\n\n pub fn html_element(&mut self, ctx: &mut TraverseCtx<'a>) -> Expression<'a> {\n get(&mut self.html_el_id, \"_hE\", ctx)\n }\n\n pub fn svg_template(&mut self, ctx: &mut TraverseCtx<'a>) -> Expression<'a> {\n get(&mut self.svg_id, \"_sN\", ctx)\n }\n\n pub fn svg_element(&mut self, ctx: &mut TraverseCtx<'a>) -> Expression<'a> {\n get(&mut self.svg_el_id, \"_sE\", ctx)\n }\n\n pub fn create_from_template(&mut self, ctx: &mut TraverseCtx<'a>) -> Expression<'a> {\n get(&mut self.tpl_id, \"_t\", ctx)\n }\n\n pub fn empty_array(&mut self, ctx: &mut TraverseCtx<'a>) -> Expression<'a> {\n get(&mut self.empty_array_id, \"EMPTY_ARRAY\", ctx)\n }\n\n pub fn hoist(&mut self, ctx: &mut TraverseCtx<'a>) -> Expression<'a> {\n get(&mut self.hoist_id, \"hoist\", ctx)\n }\n\n pub fn dedupe(&mut self, ctx: &mut TraverseCtx<'a>) -> Expression<'a> {\n get(&mut self.dedupe_id, \"dedupe\", ctx)\n }\n\n pub fn create_import_statements(&self, ctx: &mut TraverseCtx<'a>) -> Vec> {\n let mut imports = Vec::new();\n let mut specifiers = ctx.ast.vec();\n if let Some(id) = &self.descriptor_id {\n specifiers.push(spec(\"_T\", id, ctx));\n }\n if let Some(id) = &self.html_id {\n specifiers.push(spec(\"_hN\", id, ctx));\n }\n if let Some(id) = &self.html_el_id {\n specifiers.push(spec(\"_hE\", id, ctx));\n }\n if let Some(id) = &self.svg_id {\n specifiers.push(spec(\"_sN\", id, ctx));\n }\n if let Some(id) = &self.svg_el_id {\n specifiers.push(spec(\"_sE\", id, ctx));\n }\n if let Some(id) = &self.tpl_id {\n specifiers.push(spec(\"_t\", id, ctx));\n }\n if let Some(id) = &self.empty_array_id {\n specifiers.push(spec(\"EMPTY_ARRAY\", id, ctx));\n }\n if !specifiers.is_empty() {\n imports.push(Statement::ImportDeclaration(ctx.ast.alloc_import_declaration(\n SPAN,\n Some(specifiers),\n ctx.ast.string_literal(SPAN, ctx.ast.atom(\"ivi\"), None),\n None,\n NONE,\n ImportOrExportKind::Value,\n )));\n }\n\n let mut specifiers = ctx.ast.vec();\n if let Some(id) = &self.hoist_id {\n specifiers.push(spec(\"hoist\", id, ctx));\n }\n if let Some(id) = &self.dedupe_id {\n specifiers.push(spec(\"dedupe\", id, ctx));\n }\n if !specifiers.is_empty() {\n imports.push(Statement::ImportDeclaration(ctx.ast.alloc_import_declaration(\n SPAN,\n Some(specifiers),\n ctx.ast.string_literal(SPAN, ctx.ast.atom(\"oveo\"), None),\n None,\n NONE,\n ImportOrExportKind::Value,\n )));\n }\n\n imports\n }\n}\n\nfn get<'a>(\n cell: &mut Option>,\n name: &'static str,\n ctx: &mut TraverseCtx<'a>,\n) -> Expression<'a> {\n if let Some(id) = cell {\n id.create_read_expression(ctx)\n } else {\n let uid = ctx.generate_uid_in_root_scope(name, SymbolFlags::ConstVariable);\n let read = uid.create_read_expression(ctx);\n *cell = Some(uid);\n read\n }\n}\n\nfn spec<'a>(\n name: &'static str,\n id: &BoundIdentifier<'a>,\n ctx: &mut TraverseCtx<'a>,\n) -> ImportDeclarationSpecifier<'a> {\n ImportDeclarationSpecifier::ImportSpecifier(ctx.ast.alloc_import_specifier(\n SPAN,\n ModuleExportName::IdentifierName(ctx.ast.identifier_name(SPAN, ctx.ast.atom(name))),\n id.create_binding_identifier(ctx),\n ImportOrExportKind::Value,\n ))\n}\n" }, { "path": "crates/ivi_compiler/src/lib.rs", "content": "use std::path::PathBuf;\n\nuse oxc_allocator::Allocator;\nuse oxc_codegen::{Codegen, CodegenOptions};\nuse oxc_diagnostics::GraphicalReportHandler;\nuse oxc_parser::Parser;\nuse oxc_semantic::SemanticBuilder;\nuse oxc_span::SourceType;\nuse rustc_hash::{FxHashMap, FxHashSet};\n\nmod chunk;\nmod context;\nmod import;\nmod module;\nmod oveo;\nmod tpl;\n\n#[derive(Default, Debug)]\npub struct CompilerOptions {\n pub dedupe_strings: bool,\n pub oveo: bool,\n}\n\npub struct CompilerOutput {\n pub code: String,\n pub map: String,\n}\n\n#[derive(Debug, thiserror::Error)]\npub enum CompilerError {\n #[error(\"Invalid module type: {0}\")]\n ModuleType(String),\n #[error(\"Unable to parse javascript file: {0}\")]\n SyntaxError(String),\n #[error(\"Unable to parse javascript file: {0}\")]\n SemanticError(String),\n #[error(\"Invalid template: {0}\")]\n InvalidTemplate(String),\n}\n\npub fn compile_module(\n source_text: &str,\n module_type: &str,\n options: &CompilerOptions,\n strings: &mut FxHashSet,\n) -> Result {\n let allocator = Allocator::default();\n let source_type = match module_type {\n \"js\" => SourceType::mjs(),\n \"jsx\" => SourceType::jsx(),\n \"ts\" => SourceType::ts(),\n \"tsx\" => SourceType::tsx(),\n _ => return Err(CompilerError::ModuleType(module_type.to_string())),\n };\n let ret = Parser::new(&allocator, source_text, source_type).parse();\n if let Some(err) = ret.errors.first() {\n return Err(CompilerError::SyntaxError(err.to_string()));\n }\n\n let mut program = ret.program;\n\n let ret = SemanticBuilder::new().with_excess_capacity(1.0).build(&program);\n if let Some(err) = ret.errors.first() {\n return Err(CompilerError::SemanticError(err.to_string()));\n }\n\n let scoping = ret.semantic.into_scoping();\n let mut errors = module::compile_module(&mut program, &allocator, scoping, options, strings);\n if let Some(err) = errors.drain(..).next() {\n let report_handler = GraphicalReportHandler::new();\n let mut s = String::new();\n let _ = report_handler\n .render_report(&mut s, err.with_source_code(source_text.to_string()).as_ref());\n return Err(CompilerError::InvalidTemplate(s));\n }\n\n let result = Codegen::new()\n .with_options(CodegenOptions {\n source_map_path: Some(PathBuf::new()),\n ..Default::default()\n })\n .build(&program);\n\n Ok(CompilerOutput {\n code: result.code,\n map: result.map.map_or_else(String::default, |v| v.to_json_string()),\n })\n}\n\npub fn compile_chunk(\n source_text: &str,\n strings: &FxHashMap,\n) -> Result {\n let allocator = Allocator::default();\n let source_type = SourceType::default();\n let ret = Parser::new(&allocator, source_text, source_type).parse();\n if let Some(err) = ret.errors.first() {\n return Err(CompilerError::SyntaxError(err.to_string()));\n }\n\n let mut program = ret.program;\n\n let ret = SemanticBuilder::new().with_excess_capacity(0.1).build(&program);\n if let Some(err) = ret.errors.first() {\n return Err(CompilerError::SemanticError(err.to_string()));\n }\n\n let scoping = ret.semantic.into_scoping();\n\n chunk::compile_chunk(&mut program, &allocator, scoping, strings);\n\n let result = Codegen::new()\n .with_options(CodegenOptions {\n source_map_path: Some(PathBuf::new()),\n ..Default::default()\n })\n .build(&program);\n\n Ok(CompilerOutput {\n code: result.code,\n map: result.map.map_or_else(String::default, |v| v.to_json_string()),\n })\n}\n" }, { "path": "crates/ivi_compiler/src/module/mod.rs", "content": "use std::collections::hash_map;\n\nuse oxc_allocator::{Address, Allocator, GetAddress, TakeIn};\nuse oxc_ast::ast::*;\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_semantic::{Scoping, SymbolId};\nuse oxc_traverse::{Traverse, traverse_mut};\nuse rustc_hash::{FxHashMap, FxHashSet};\n\nuse crate::{\n CompilerOptions,\n context::{TraverseCtx, TraverseCtxState},\n import::ImportSymbols,\n oveo::oveo_intrinsic,\n tpl::{TemplateKind, compile_template},\n};\n\npub fn compile_module<'a>(\n program: &mut Program<'a>,\n allocator: &'a Allocator,\n scoping: Scoping,\n options: &CompilerOptions,\n strings: &mut FxHashSet,\n) -> Vec {\n let mut t = ModuleCompiler::new(options, strings);\n traverse_mut(&mut t, allocator, program, scoping, TraverseCtxState::default());\n t.errors\n}\n\nstruct ModuleCompiler<'a, 'ctx> {\n options: &'ctx CompilerOptions,\n strings: &'ctx mut FxHashSet,\n ivi_module: FxHashMap,\n imports: ImportSymbols<'a>,\n statements: Vec
,\n templates: FxHashMap>>,\n errors: Vec,\n}\n\nimpl<'a, 'ctx> ModuleCompiler<'a, 'ctx> {\n pub fn new(options: &'ctx CompilerOptions, strings: &'ctx mut FxHashSet) -> Self {\n Self {\n options,\n strings,\n ivi_module: FxHashMap::default(),\n imports: ImportSymbols::default(),\n statements: Vec::new(),\n templates: FxHashMap::default(),\n errors: Vec::new(),\n }\n }\n\n fn resolve(&self, expr: &Expression<'a>, scoping: &Scoping) -> Option {\n match expr {\n Expression::Identifier(id) => {\n let r = scoping.get_reference(id.reference_id());\n if let Some(symbol_id) = r.symbol_id() {\n self.ivi_module.get(&symbol_id).copied()\n } else {\n None\n }\n }\n Expression::StaticMemberExpression(expr) => {\n if let Some(IviSymbol::Module) = self.resolve(&expr.object, scoping) {\n match expr.property.name.as_str() {\n \"component\" => Some(IviSymbol::Component),\n \"html\" => Some(IviSymbol::Html),\n \"svg\" => Some(IviSymbol::Svg),\n _ => None,\n }\n } else {\n None\n }\n }\n _ => None,\n }\n }\n\n fn add_template_decl(&mut self, address: Address, decl: Statement<'a>) {\n match self.templates.entry(address) {\n hash_map::Entry::Occupied(mut entry) => {\n entry.get_mut().push(decl);\n }\n hash_map::Entry::Vacant(entry) => {\n entry.insert(vec![decl]);\n }\n }\n }\n}\n\nimpl<'a> Traverse<'a, TraverseCtxState<'a>> for ModuleCompiler<'a, '_> {\n fn enter_statement(&mut self, node: &mut Statement<'a>, _ctx: &mut TraverseCtx<'a>) {\n self.statements.push(node.address());\n }\n\n fn exit_statement(&mut self, _node: &mut Statement<'a>, _ctx: &mut TraverseCtx<'a>) {\n self.statements.pop();\n }\n\n fn exit_expression(&mut self, node: &mut Expression<'a>, ctx: &mut TraverseCtx<'a>) {\n match node {\n Expression::CallExpression(expr) if self.options.oveo => {\n // hoist render functions\n // component(() => hoist(() => { .. }));\n if let Some(IviSymbol::Component) = self.resolve(&expr.callee, ctx.scoping()) {\n if let Some(Argument::ArrowFunctionExpression(expr)) = expr.arguments.get_mut(0)\n {\n if expr.expression {\n if let Some(Statement::ExpressionStatement(expr_stmt)) =\n &mut expr.body.statements.get_mut(0)\n {\n expr_stmt.expression = oveo_intrinsic(\n expr_stmt.expression.take_in(ctx.ast.allocator),\n self.imports.hoist(ctx),\n ctx,\n );\n }\n }\n }\n }\n }\n Expression::TaggedTemplateExpression(expr) => {\n if let Some(ivi) = self.resolve(&expr.tag, ctx.scoping()) {\n let kind = match ivi {\n IviSymbol::Html => TemplateKind::Html,\n IviSymbol::Svg => TemplateKind::Svg,\n _ => {\n return;\n }\n };\n match compile_template(\n &mut expr.quasi,\n ctx,\n kind,\n &mut self.imports,\n self.options.oveo,\n self.options.dedupe_strings,\n ) {\n Ok(result) => {\n for s in result.strings {\n self.strings.insert(s);\n }\n let address = self.statements[0];\n for decl in result.decl {\n self.add_template_decl(address, decl);\n }\n *node = result.expr;\n }\n Err(error) => {\n self.errors.push(error);\n }\n }\n }\n }\n _ => {}\n }\n }\n\n fn exit_import_declaration(\n &mut self,\n node: &mut ImportDeclaration<'a>,\n _ctx: &mut TraverseCtx<'a>,\n ) {\n // Resolve ivi module\n if let Some(specifiers) = &node.specifiers {\n let source = &node.source;\n if source.value != \"ivi\" {\n return;\n }\n\n for spec in specifiers {\n match spec {\n // import { imported } from \"source\"\n // import { imported as local } from \"source\"\n ImportDeclarationSpecifier::ImportSpecifier(spec) => {\n let s = match spec.imported.name().as_str() {\n \"component\" => IviSymbol::Component,\n \"html\" => IviSymbol::Html,\n \"svg\" => IviSymbol::Svg,\n _ => {\n continue;\n }\n };\n self.ivi_module.insert(spec.local.symbol_id(), s);\n }\n // import * as local from \"source\"\n ImportDeclarationSpecifier::ImportNamespaceSpecifier(spec) => {\n self.ivi_module.insert(spec.local.symbol_id(), IviSymbol::Module);\n }\n _ => {}\n }\n }\n }\n }\n\n fn exit_program(&mut self, node: &mut Program<'a>, ctx: &mut TraverseCtx<'a>) {\n let imports = self.imports.create_import_statements(ctx);\n if !imports.is_empty() {\n let index = node\n .body\n .iter()\n .position(|stmt| !matches!(stmt, Statement::ImportDeclaration(_)))\n .unwrap_or(node.body.len());\n\n node.body.splice(index..index, imports);\n }\n\n if !self.templates.is_empty() {\n let statements = &mut node.body;\n let mut new_statements =\n ctx.ast.vec_with_capacity(statements.len() + self.templates.len());\n\n for stmt in statements.drain(..) {\n if let Some(s) = self.templates.remove(&stmt.address()) {\n new_statements.extend(s.into_iter());\n }\n new_statements.push(stmt);\n }\n\n *statements = new_statements;\n }\n }\n}\n\n#[derive(Clone, Copy)]\nenum IviSymbol {\n Module,\n Component,\n Html,\n Svg,\n}\n" }, { "path": "crates/ivi_compiler/src/oveo.rs", "content": "use oxc_ast::{NONE, ast::Expression};\nuse oxc_span::SPAN;\n\nuse crate::context::TraverseCtx;\n\n// annotation(expr)\npub fn oveo_intrinsic<'a>(\n expr: Expression<'a>,\n callee: Expression<'a>,\n ctx: &mut TraverseCtx<'a>,\n) -> Expression<'a> {\n ctx.ast.expression_call(SPAN, callee, NONE, ctx.ast.vec_from_array([expr.into()]), false)\n}\n" }, { "path": "crates/ivi_compiler/src/tpl/emit.rs", "content": "use indexmap::IndexSet;\nuse oxc_allocator::{TakeIn, Vec as ArenaVec};\nuse oxc_ast::{\n AstBuilder,\n ast::{Expression, TemplateElement, TemplateElementValue},\n};\nuse oxc_span::SPAN;\n\nuse crate::{\n context::TraverseCtx,\n import::ImportSymbols,\n oveo::oveo_intrinsic,\n tpl::{\n TemplateKind,\n opcodes::{child_op, common_prop_type, prop_op, state_op, template_flags},\n parser::{\n TElement, TNode, TNodeKind, TProperty, TPropertyAttributeValue, TPropertyStyleValue,\n },\n },\n};\n\npub enum TemplateNode<'a> {\n Block(TemplateBlock<'a>),\n Text(String),\n Expr(usize),\n}\n\npub struct TemplateBlock<'a> {\n pub statics: Expression<'a>,\n pub flags: u32,\n pub props_op_codes: Vec,\n pub child_op_codes: Vec,\n pub state_op_codes: Vec,\n pub strings: IndexSet,\n pub expressions: Vec,\n}\n\npub fn emit_root_element<'a>(\n node: &TNode,\n kind: TemplateKind,\n expressions: &mut ArenaVec<'a, Expression<'a>>,\n ctx: &mut TraverseCtx<'a>,\n imports: &mut ImportSymbols<'a>,\n oveo: bool,\n) -> TemplateNode<'a> {\n match &node.kind {\n TNodeKind::Element(e) => {\n let statics = emit_static_template(e, expressions, &mut ctx.ast);\n\n let expr_map = create_expr_map(e, ctx, expressions, imports, oveo);\n\n let state_op_codes = emit_state_op_codes(e);\n let (props_op_codes, strings) = emit_props_op_codes(node, &expr_map);\n let child_op_codes = emit_child_op_codes(node, &expr_map);\n\n let state_slots = count_state_slots(&state_op_codes);\n let child_slots = count_child_slots(&child_op_codes);\n\n let mut flags = state_slots | (child_slots << template_flags::CHILDREN_SIZE_SHIFT);\n if let TemplateKind::Svg = kind {\n flags |= template_flags::SVG;\n }\n TemplateNode::Block(TemplateBlock {\n statics,\n flags,\n props_op_codes,\n child_op_codes,\n state_op_codes,\n strings,\n expressions: expr_map.iter().copied().collect(),\n })\n }\n TNodeKind::Text(t) => TemplateNode::Text(t.value.clone()),\n TNodeKind::Expr(e) => TemplateNode::Expr(e.index.inner()),\n }\n}\n\nfn count_state_slots(op_codes: &[u32]) -> u32 {\n let mut count = 1;\n for op in op_codes {\n if *op & state_op::SAVE != 0\n || (*op & state_op::ENTER_OR_REMOVE != 0 && (op >> state_op::OFFSET_SHIFT) == 0)\n {\n count += 1\n }\n }\n count\n}\n\nfn count_child_slots(op_codes: &[u32]) -> u32 {\n let mut count = 0;\n for op in op_codes {\n if op & child_op::TYPE == child_op::CHILD {\n count += 1;\n }\n }\n count\n}\n\nfn create_expr_map<'a>(\n root: &TElement,\n ctx: &mut TraverseCtx<'a>,\n expressions: &mut ArenaVec<'a, Expression<'a>>,\n imports: &mut ImportSymbols<'a>,\n oveo: bool,\n) -> IndexSet {\n let mut map = IndexSet::default();\n _create_expr_map(&mut map, root, ctx, expressions, imports, oveo);\n map\n}\n\nfn _create_expr_map<'a>(\n map: &mut IndexSet,\n node: &TElement,\n ctx: &mut TraverseCtx<'a>,\n expressions: &mut ArenaVec<'a, Expression<'a>>,\n imports: &mut ImportSymbols<'a>,\n oveo: bool,\n) {\n for p in &node.properties {\n match p {\n TProperty::Attribute(p) => {\n if let TPropertyAttributeValue::Expr(v) = &p.value\n && !v.hoist\n {\n map.insert(v.index.inner());\n }\n }\n TProperty::Value(p) => {\n map.insert(p.value.inner());\n }\n TProperty::DOMValue(p) => {\n map.insert(p.value.inner());\n }\n TProperty::Style(p) => {\n if let TPropertyStyleValue::Expr(v) = &p.value {\n map.insert(v.inner());\n }\n }\n TProperty::Event(p) => {\n let i = p.value.inner();\n if oveo {\n expressions[i] = oveo_intrinsic(\n expressions[i].take_in(ctx.ast.allocator),\n imports.hoist(ctx),\n ctx,\n );\n }\n map.insert(i);\n }\n TProperty::Directive(p) => {\n map.insert(p.inner());\n }\n }\n }\n\n for c in &node.children {\n match &c.kind {\n TNodeKind::Element(e) => {\n _create_expr_map(map, e, ctx, expressions, imports, oveo);\n }\n TNodeKind::Expr(e) => {\n map.insert(e.index.inner());\n }\n _ => {}\n }\n }\n}\n\nfn emit_static_template<'a>(\n node: &TElement,\n template_expressions: &mut ArenaVec<'a, Expression<'a>>,\n ast: &mut AstBuilder<'a>,\n) -> Expression<'a> {\n let mut static_part = String::new();\n let mut quasis = ast.vec();\n let mut expressions = ast.vec();\n // Node doesn't have any children elements/texts or static properties\n let mut is_simple_node = true;\n _emit_static_template(\n &mut is_simple_node,\n node,\n &mut static_part,\n &mut quasis,\n &mut expressions,\n template_expressions,\n ast,\n );\n\n if is_simple_node {\n ast.expression_string_literal(SPAN, ast.atom(&node.tag), None)\n } else {\n quasis.push(ast.template_element(\n SPAN,\n TemplateElementValue { raw: ast.atom(&static_part), cooked: None },\n true,\n false,\n ));\n\n ast.expression_template_literal(SPAN, quasis, expressions)\n }\n}\n\nfn _emit_static_template<'a>(\n is_simple_node: &mut bool,\n node: &TElement,\n static_part: &mut String,\n quasis: &mut ArenaVec<'a, TemplateElement<'a>>,\n expressions: &mut ArenaVec<'a, Expression<'a>>,\n template_expressions: &mut ArenaVec<'a, Expression<'a>>,\n ast: &mut AstBuilder<'a>,\n) {\n static_part.push('<');\n static_part.push_str(&node.tag);\n\n let mut style = String::new();\n for p in &node.properties {\n match p {\n TProperty::Attribute(p) => match &p.value {\n TPropertyAttributeValue::String(v) => {\n if p.key == \"style\" {\n if style.is_empty() {\n style = v.clone();\n } else {\n style.push(';');\n style.push_str(v);\n }\n } else {\n *is_simple_node = false;\n static_part.push(' ');\n static_part.push_str(&p.key);\n static_part.push_str(\"=\\\"\");\n static_part.push_str(v);\n static_part.push('\"');\n }\n }\n TPropertyAttributeValue::Bool => {\n *is_simple_node = false;\n static_part.push(' ');\n static_part.push_str(&p.key);\n }\n TPropertyAttributeValue::Expr(v) => {\n if v.hoist {\n *is_simple_node = false;\n static_part.push(' ');\n static_part.push_str(&p.key);\n static_part.push_str(\"=\\\"\");\n quasis.push(ast.template_element(\n SPAN,\n TemplateElementValue { raw: ast.atom(static_part), cooked: None },\n false,\n false,\n ));\n expressions\n .push(template_expressions[v.index.inner()].take_in(ast.allocator));\n static_part.clear();\n static_part.push('\"');\n }\n }\n },\n TProperty::Style(p) => {\n if let TPropertyStyleValue::String(v) = &p.value {\n if !style.is_empty() {\n style.push(';');\n }\n style.push_str(&p.key);\n style.push(':');\n style.push_str(v);\n }\n }\n _ => {}\n }\n }\n if !style.is_empty() {\n *is_simple_node = false;\n static_part.push_str(\" style=\\\"\");\n static_part.push_str(&style);\n static_part.push('\"');\n }\n static_part.push('>');\n if node.void {\n return;\n }\n\n let mut siblings_state = 0;\n for c in &node.children {\n match &c.kind {\n TNodeKind::Element(c) => {\n *is_simple_node = false;\n _emit_static_template(\n is_simple_node,\n c,\n static_part,\n quasis,\n expressions,\n template_expressions,\n ast,\n );\n siblings_state = 0;\n }\n TNodeKind::Text(n) => {\n *is_simple_node = false;\n if (siblings_state & 3) == 3 {\n static_part.push_str(\"\");\n }\n siblings_state = 1;\n static_part.push_str(&n.value);\n }\n TNodeKind::Expr(_) => {\n siblings_state |= 2;\n }\n }\n }\n\n static_part.push_str(\"');\n}\n\nfn emit_props_op_codes(node: &TNode, expr_map: &IndexSet) -> (Vec, IndexSet) {\n let mut op_codes = Vec::new();\n let mut strings = IndexSet::new();\n _emit_props_op_codes(&mut op_codes, node, true, &mut strings, expr_map);\n (op_codes, strings)\n}\nfn _emit_props_op_codes(\n op_codes: &mut Vec,\n node: &TNode,\n is_root: bool,\n strings: &mut IndexSet,\n expr_map: &IndexSet,\n) {\n fn string_index(strings: &mut IndexSet, key: &str) -> u32 {\n if let Some(i) = strings.get_index_of(key) {\n i as u32\n } else {\n let (i, _) = strings.insert_full(key.to_string());\n i as u32\n }\n }\n if let TNodeKind::Element(e) = &node.kind {\n if node.props_exprs > 0 {\n if !is_root {\n op_codes\n .push(prop_op::SET_NODE | ((node.state_index as u32) << prop_op::DATA_SHIFT));\n }\n for p in &e.properties {\n match p {\n TProperty::Attribute(p) => {\n if let TPropertyAttributeValue::Expr(expr) = &p.value {\n if let Some(i) = expr_map.get_index_of(&expr.index.inner()) {\n if p.key == \"class\" {\n op_codes.push(\n prop_op::COMMON\n | (common_prop_type::CLASS_NAME << prop_op::DATA_SHIFT)\n | ((i as u32) << prop_op::INPUT_SHIFT),\n );\n } else {\n op_codes.push(\n prop_op::ATTRIBUTE\n | (string_index(strings, &p.key)\n << prop_op::DATA_SHIFT)\n | ((i as u32) << prop_op::INPUT_SHIFT),\n );\n }\n }\n }\n }\n TProperty::Value(p) => {\n match p.key.as_str() {\n \"textContent\" => {\n op_codes.push(\n prop_op::COMMON\n | (common_prop_type::TEXT_CONTENT << prop_op::DATA_SHIFT)\n | ((p.value.inner() as u32) << prop_op::INPUT_SHIFT),\n );\n }\n \"innerHTML\" => {\n op_codes.push(\n prop_op::COMMON\n | (common_prop_type::INNER_HTML << prop_op::DATA_SHIFT)\n | ((p.value.inner() as u32) << prop_op::INPUT_SHIFT),\n );\n }\n _ => {\n if let Some(i) = expr_map.get_index_of(&p.value.inner()) {\n op_codes.push(\n prop_op::PROPERTY\n | (string_index(strings, &p.key)\n << prop_op::DATA_SHIFT)\n | ((i as u32) << prop_op::INPUT_SHIFT),\n );\n }\n }\n };\n }\n TProperty::DOMValue(p) => {\n match p.key.as_str() {\n \"textContent\" => {\n op_codes.push(\n prop_op::COMMON\n | (common_prop_type::TEXT_CONTENT << prop_op::DATA_SHIFT)\n | ((p.value.inner() as u32) << prop_op::INPUT_SHIFT),\n );\n }\n \"innerHTML\" => {\n op_codes.push(\n prop_op::COMMON\n | (common_prop_type::INNER_HTML << prop_op::DATA_SHIFT)\n | ((p.value.inner() as u32) << prop_op::INPUT_SHIFT),\n );\n }\n _ => {\n if let Some(i) = expr_map.get_index_of(&p.value.inner()) {\n op_codes.push(\n prop_op::DIFF_DOM_PROPERTY\n | (string_index(strings, &p.key)\n << prop_op::DATA_SHIFT)\n | ((i as u32) << prop_op::INPUT_SHIFT),\n );\n }\n }\n };\n }\n TProperty::Style(p) => {\n if let TPropertyStyleValue::Expr(expr_index) = &p.value {\n if let Some(i) = expr_map.get_index_of(&expr_index.inner()) {\n op_codes.push(\n prop_op::STYLE\n | (string_index(strings, &p.key) << prop_op::DATA_SHIFT)\n | ((i as u32) << prop_op::INPUT_SHIFT),\n );\n }\n }\n }\n TProperty::Event(p) => {\n if let Some(i) = expr_map.get_index_of(&p.value.inner()) {\n op_codes.push(\n prop_op::EVENT\n | (string_index(strings, &p.key) << prop_op::DATA_SHIFT)\n | ((i as u32) << prop_op::INPUT_SHIFT),\n );\n }\n }\n TProperty::Directive(p) => {\n if let Some(i) = expr_map.get_index_of(&p.inner()) {\n op_codes\n .push(prop_op::DIRECTIVE | ((i as u32) << prop_op::INPUT_SHIFT));\n }\n }\n }\n }\n }\n\n for c in &e.children {\n _emit_props_op_codes(op_codes, c, false, strings, expr_map);\n }\n }\n}\n\nfn emit_state_op_codes(node: &TElement) -> Vec {\n let mut op_codes = Vec::new();\n _emit_state_op_codes(&mut op_codes, node);\n op_codes\n}\n\nfn _emit_state_op_codes(op_codes: &mut Vec, node: &TElement) {\n mod state_flags {\n pub const PREV_TEXT: u32 = 1;\n pub const PREV_EXPR: u32 = 1 << 1;\n }\n let mut state = 0;\n 'outer: for c in &node.children {\n match &c.kind {\n TNodeKind::Element(e) => {\n let mut op = 0;\n if state & state_flags::PREV_EXPR != 0 || c.children_exprs > 0 || c.props_exprs > 0\n {\n op = state_op::SAVE;\n }\n\n let current_op_index = op_codes.len();\n op_codes.push(op);\n\n if c.flags & TNode::HAS_EXPRESSIONS != 0 {\n _emit_state_op_codes(op_codes, e);\n let children_offset = op_codes.len() - (current_op_index + 1);\n if children_offset > 0 {\n op |= state_op::ENTER_OR_REMOVE\n | ((children_offset as u32) << state_op::OFFSET_SHIFT);\n op_codes[current_op_index] = op;\n }\n }\n if c.flags & (TNode::HAS_NEXT_EXPRESSION | TNode::HAS_NEXT_DOM_NODE)\n != (TNode::HAS_NEXT_EXPRESSION | TNode::HAS_NEXT_DOM_NODE)\n {\n if op == 0 {\n op_codes.pop();\n }\n break 'outer;\n }\n state = 0;\n }\n TNodeKind::Text(_) => {\n if state & (state_flags::PREV_TEXT | state_flags::PREV_EXPR)\n == (state_flags::PREV_TEXT | state_flags::PREV_EXPR)\n {\n op_codes.push(state_op::ENTER_OR_REMOVE);\n } else if state & state_flags::PREV_EXPR != 0 {\n op_codes.push(state_op::SAVE);\n } else if c.flags & (TNode::HAS_NEXT_EXPRESSION | TNode::HAS_NEXT_DOM_NODE)\n != (TNode::HAS_NEXT_EXPRESSION | TNode::HAS_NEXT_DOM_NODE)\n {\n break 'outer;\n } else {\n op_codes.push(0);\n }\n state = state_flags::PREV_TEXT;\n }\n TNodeKind::Expr(_) => {\n state |= state_flags::PREV_EXPR;\n }\n }\n }\n}\n\nfn emit_child_op_codes(node: &TNode, expr_map: &IndexSet) -> Vec {\n let mut op_codes = Vec::new();\n _emit_child_op_codes(&mut op_codes, node, true, expr_map);\n op_codes\n}\n\nfn _emit_child_op_codes(\n op_codes: &mut Vec,\n node: &TNode,\n is_root: bool,\n expr_map: &IndexSet,\n) {\n if let TNodeKind::Element(e) = &node.kind {\n if node.children_exprs > 0 {\n if !is_root {\n op_codes.push(\n child_op::SET_PARENT | ((node.state_index as u32) << child_op::VALUE_SHIFT),\n );\n }\n let mut prev_state_index = None;\n let mut prev_expr = false;\n for c in e.children.iter().rev() {\n if let TNodeKind::Expr(expr_index) = &c.kind {\n if let Some(prev_state_index) = prev_state_index\n && !prev_expr\n {\n op_codes.push(\n child_op::SET_NEXT\n | ((prev_state_index as u32) << child_op::VALUE_SHIFT),\n );\n }\n op_codes.push(\n child_op::CHILD\n | ((expr_map.get_index_of(&expr_index.index.inner()).unwrap() as u32)\n << child_op::VALUE_SHIFT),\n );\n prev_expr = true;\n } else {\n prev_expr = false;\n prev_state_index = Some(c.state_index);\n }\n }\n }\n for c in e.children.iter().rev() {\n _emit_child_op_codes(op_codes, c, false, expr_map);\n }\n }\n}\n" }, { "path": "crates/ivi_compiler/src/tpl/html.rs", "content": "pub fn is_html_void_element(tag: &str) -> bool {\n matches!(\n tag,\n \"audio\"\n | \"video\"\n | \"embed\"\n | \"input\"\n | \"param\"\n | \"source\"\n | \"track\"\n | \"area\"\n | \"base\"\n | \"link\"\n | \"meta\"\n | \"br\"\n | \"col\"\n | \"hr\"\n | \"img\"\n | \"wbr\"\n )\n}\n" }, { "path": "crates/ivi_compiler/src/tpl/mod.rs", "content": "use indexmap::IndexSet;\nuse oxc_allocator::TakeIn;\nuse oxc_ast::{NONE, ast::*};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_semantic::SymbolFlags;\nuse oxc_span::SPAN;\n\nuse crate::{\n context::TraverseCtx, import::ImportSymbols, oveo::oveo_intrinsic, tpl::emit::TemplateNode,\n};\n\nmod emit;\nmod html;\npub mod opcodes;\nmod parser;\n\npub struct CompiledTemplate<'a> {\n pub decl: Vec>,\n pub expr: Expression<'a>,\n pub strings: Vec,\n}\n\n#[derive(Clone, Copy)]\npub enum TemplateKind {\n Html,\n Svg,\n}\n\npub fn compile_template<'a>(\n tpl: &mut TemplateLiteral<'a>,\n ctx: &mut TraverseCtx<'a>,\n kind: TemplateKind,\n imports: &mut ImportSymbols<'a>,\n oveo: bool,\n dedupe_strings: bool,\n) -> Result, OxcDiagnostic> {\n let mut decl = Vec::new();\n let mut exprs = Vec::new();\n let mut strings = Vec::new();\n let nodes = parser::parse_template(tpl, ctx.scoping())?;\n\n for n in &nodes {\n let e = emit::emit_root_element(n, kind, &mut tpl.expressions, ctx, imports, oveo);\n match e {\n TemplateNode::Block(t) => {\n let uid = ctx.generate_uid_in_root_scope(\"_TPL_\", SymbolFlags::ConstVariable);\n\n // const _TPL_ = __IVI_TPL__(_T(statics, ..opcodes));\n let statics = if let Expression::StringLiteral(_) = t.statics {\n ctx.ast.expression_call(\n SPAN,\n match kind {\n TemplateKind::Html => imports.html_element(ctx),\n TemplateKind::Svg => imports.svg_element(ctx),\n },\n NONE,\n ctx.ast.vec1(t.statics.into()),\n false,\n )\n } else {\n ctx.ast.expression_call(\n SPAN,\n match kind {\n TemplateKind::Html => imports.html_template(ctx),\n TemplateKind::Svg => imports.svg_template(ctx),\n },\n NONE,\n ctx.ast.vec1(t.statics.into()),\n false,\n )\n };\n let statics =\n if oveo { oveo_intrinsic(statics, imports.dedupe(ctx), ctx) } else { statics };\n\n let mut arguments = ctx.ast.vec_with_capacity(6);\n arguments.push(statics.into());\n arguments.push(\n ctx.ast\n .expression_numeric_literal(SPAN, t.flags as f64, None, NumberBase::Decimal)\n .into(),\n );\n arguments\n .push(op_codes_into_expression(&t.props_op_codes, ctx, imports, oveo).into());\n arguments\n .push(op_codes_into_expression(&t.child_op_codes, ctx, imports, oveo).into());\n arguments\n .push(op_codes_into_expression(&t.state_op_codes, ctx, imports, oveo).into());\n if !t.strings.is_empty() {\n arguments.push(strings_into_expression(&t.strings, ctx).into());\n strings.extend(t.strings.into_iter());\n }\n let template_descriptor = ctx.ast.expression_call(\n SPAN,\n imports.template_descriptor(ctx),\n NONE,\n arguments,\n false,\n );\n let v = ctx.ast.declaration_variable(\n SPAN,\n VariableDeclarationKind::Const,\n ctx.ast.vec1(ctx.ast.variable_declarator(\n SPAN,\n VariableDeclarationKind::Const,\n ctx.ast.binding_pattern_binding_identifier(SPAN, uid.name),\n NONE,\n Some(if dedupe_strings {\n ctx.ast.expression_call(\n SPAN,\n ctx.ast.expression_identifier(SPAN, ctx.ast.atom(\"__IVI_TPL__\")),\n NONE,\n ctx.ast.vec_from_array([template_descriptor.into()]),\n false,\n )\n } else {\n template_descriptor\n }),\n false,\n )),\n false,\n );\n decl.push(v.into());\n\n // _t(_TPL_, [expressions])\n let call_expressions = if t.expressions.is_empty() {\n ctx.ast.vec_from_array([uid.create_read_expression(ctx).into()])\n } else {\n ctx.ast.vec_from_array([\n uid.create_read_expression(ctx).into(),\n ctx.ast\n .expression_array(\n SPAN,\n ctx.ast.vec_from_iter(t.expressions.iter().map(|i| {\n tpl.expressions[*i].take_in(ctx.ast.allocator).into()\n })),\n )\n .into(),\n ])\n };\n let call = ctx.ast.expression_call(\n SPAN,\n imports.create_from_template(ctx),\n NONE,\n call_expressions,\n false,\n );\n exprs.push(call);\n }\n TemplateNode::Text(text) => {\n exprs.push(ctx.ast.expression_string_literal(SPAN, ctx.ast.atom(&text), None));\n }\n TemplateNode::Expr(i) => {\n exprs.push(tpl.expressions[i].take_in(ctx.ast.allocator));\n }\n }\n }\n\n let expr = if exprs.len() > 1 {\n ctx.ast.expression_array(SPAN, ctx.ast.vec_from_iter(exprs.into_iter().map(|e| e.into())))\n } else {\n exprs.pop().unwrap()\n };\n Ok(CompiledTemplate { decl, expr, strings })\n}\n\nfn op_codes_into_expression<'a>(\n op_codes: &[u32],\n ctx: &mut TraverseCtx<'a>,\n imports: &mut ImportSymbols<'a>,\n oveo: bool,\n) -> Expression<'a> {\n if op_codes.is_empty() {\n imports.empty_array(ctx)\n } else {\n let expr = ctx.ast.expression_array(\n SPAN,\n ctx.ast.vec_from_iter(op_codes.iter().map(|o| {\n ctx.ast\n .expression_numeric_literal(SPAN, *o as f64, None, NumberBase::Decimal)\n .into()\n })),\n );\n if oveo { oveo_intrinsic(expr, imports.dedupe(ctx), ctx) } else { expr }\n }\n}\n\nfn strings_into_expression<'a>(\n strings: &IndexSet,\n ctx: &mut TraverseCtx<'a>,\n) -> Expression<'a> {\n ctx.ast.expression_array(\n SPAN,\n ctx.ast.vec_from_iter(\n strings\n .iter()\n .map(|s| ctx.ast.expression_string_literal(SPAN, ctx.ast.atom(s), None).into()),\n ),\n )\n}\n" }, { "path": "crates/ivi_compiler/src/tpl/opcodes.rs", "content": "pub mod template_flags {\n pub const CHILDREN_SIZE_SHIFT: u32 = 6;\n pub const SVG: u32 = 1 << 12;\n}\n\npub mod state_op {\n pub const SAVE: u32 = 0b01;\n pub const ENTER_OR_REMOVE: u32 = 0b10;\n pub const OFFSET_SHIFT: u32 = 2;\n}\n\npub mod common_prop_type {\n pub const CLASS_NAME: u32 = 0;\n pub const TEXT_CONTENT: u32 = 1;\n pub const INNER_HTML: u32 = 2;\n}\n\npub mod prop_op {\n pub const SET_NODE: u32 = 0;\n pub const COMMON: u32 = 1;\n pub const ATTRIBUTE: u32 = 2;\n pub const PROPERTY: u32 = 3;\n pub const DIFF_DOM_PROPERTY: u32 = 4;\n pub const STYLE: u32 = 5;\n pub const EVENT: u32 = 6;\n pub const DIRECTIVE: u32 = 7;\n pub const TYPE_MASK: u32 = 0b111;\n pub const INPUT_SHIFT: u32 = 3;\n pub const DATA_SHIFT: u32 = 9;\n}\n\npub mod child_op {\n pub const CHILD: u32 = 0b00;\n pub const SET_NEXT: u32 = 0b01;\n pub const SET_PARENT: u32 = 0b11;\n pub const TYPE: u32 = 0b11;\n pub const VALUE_SHIFT: u32 = 2;\n}\n" }, { "path": "crates/ivi_compiler/src/tpl/parser.rs", "content": "use oxc_ast::ast::{Expression, TemplateElement, TemplateLiteral};\nuse oxc_diagnostics::OxcDiagnostic;\nuse oxc_semantic::Scoping;\n\nuse crate::tpl::html::is_html_void_element;\n\n#[derive(Clone, Copy)]\npub struct ExprIndex(usize);\n\nimpl ExprIndex {\n pub fn inner(self) -> usize {\n self.0\n }\n}\n\npub struct THoistableExpr {\n pub index: ExprIndex,\n pub hoist: bool,\n}\n\npub struct TNode {\n pub kind: TNodeKind,\n pub flags: u8,\n pub state_index: u16,\n pub children_exprs: u16,\n pub props_exprs: u16,\n}\n\npub enum TNodeKind {\n Element(TElement),\n Text(TText),\n Expr(TExpr),\n}\n\nimpl TNode {\n pub const HAS_EXPRESSIONS: u8 = 1;\n pub const HAS_NEXT_EXPRESSION: u8 = 1 << 1;\n pub const HAS_NEXT_DOM_NODE: u8 = 1 << 2;\n\n fn new(kind: TNodeKind) -> Self {\n Self { kind, flags: 0, state_index: 0, children_exprs: 0, props_exprs: 0 }\n }\n\n fn text(text: &str) -> Self {\n Self {\n kind: TNodeKind::Text(TText { value: text.to_string() }),\n flags: 0,\n state_index: 0,\n children_exprs: 0,\n props_exprs: 0,\n }\n }\n\n fn space_text() -> Self {\n Self::text(\" \")\n }\n}\n\npub struct TElement {\n pub tag: String,\n pub properties: Vec,\n pub children: Vec,\n pub void: bool,\n}\n\npub struct TText {\n pub value: String,\n}\n\npub struct TExpr {\n pub index: ExprIndex,\n}\n\npub enum TProperty {\n Attribute(TPropertyAttribute),\n Value(TPropertyValue),\n DOMValue(TPropertyDOMValue),\n Style(TPropertyStyle),\n Event(TPropertyEvent),\n Directive(ExprIndex),\n}\n\npub struct TPropertyAttribute {\n pub key: String,\n pub value: TPropertyAttributeValue,\n}\n\npub enum TPropertyAttributeValue {\n String(String),\n Bool,\n Expr(THoistableExpr),\n}\n\npub struct TPropertyValue {\n pub key: String,\n pub value: ExprIndex,\n}\n\npub struct TPropertyDOMValue {\n pub key: String,\n pub value: ExprIndex,\n}\n\npub struct TPropertyStyle {\n pub key: String,\n pub value: TPropertyStyleValue,\n}\n\npub enum TPropertyStyleValue {\n String(String),\n Expr(ExprIndex),\n}\n\npub struct TPropertyEvent {\n pub key: String,\n pub value: ExprIndex,\n}\n\npub fn parse_template<'a>(\n tpl: &'a TemplateLiteral,\n scoping: &'a Scoping,\n) -> Result, OxcDiagnostic> {\n let mut parser = Parser::new(scoping, &tpl.quasis, &tpl.expressions);\n let mut nodes = parser.parse_children_list()?;\n for n in &mut nodes {\n update_flags(n);\n assign_state_slots(n);\n }\n Ok(nodes)\n}\n\n#[derive(Debug, Clone)]\nstruct Parser<'a> {\n scoping: &'a Scoping,\n quasis: &'a [TemplateElement<'a>],\n expressions: &'a [Expression<'a>],\n text: &'a str,\n expr_cursor: usize,\n}\n\nimpl<'a> Parser<'a> {\n fn new(\n scoping: &'a Scoping,\n quasis: &'a [TemplateElement<'a>],\n expressions: &'a [Expression<'a>],\n ) -> Self {\n Self {\n scoping,\n quasis,\n expressions,\n text: quasis[0].value.cooked.unwrap().as_str(),\n expr_cursor: 0,\n }\n }\n\n fn current_element(&self) -> &TemplateElement<'a> {\n &self.quasis[self.expr_cursor]\n }\n\n fn is_end(&self) -> bool {\n self.text.is_empty() && self.expr_cursor == self.expressions.len()\n }\n\n fn peek_char(&self) -> Option {\n self.text.chars().next()\n }\n\n fn peek_nth_char(&self, n: usize) -> Option {\n self.text.chars().nth(n)\n }\n\n fn try_consume_char(&mut self, expected: char) -> Option {\n if let Some(c) = self.text.chars().next()\n && c == expected\n {\n self.text = &self.text[expected.len_utf8()..];\n Some(expected)\n } else {\n None\n }\n }\n\n fn consume_char(&mut self, expected: char) -> Result<(), OxcDiagnostic> {\n if let Some(c) = self.text.chars().next()\n && c == expected\n {\n self.text = &self.text[expected.len_utf8()..];\n Ok(())\n } else {\n let parts = self.text.split_at(self.text.len().min(10));\n Err(OxcDiagnostic::error(format!(\"Expected a '{expected}' char: {}\", parts.0))\n .with_label(self.current_element().span))\n }\n }\n\n fn advance(&mut self, i: usize) {\n self.text = &self.text[i..];\n }\n\n fn consume_expr(&mut self) -> Result {\n if self.text.is_empty() && (self.expr_cursor) < self.expressions.len() {\n let i = self.expr_cursor;\n self.expr_cursor += 1;\n self.text = self.current_element().value.cooked.unwrap().as_str();\n Ok(i)\n } else {\n Err(OxcDiagnostic::error(\"Expected an expression\")\n .with_label(self.current_element().span))\n }\n }\n\n fn consume_whitespace(&mut self) -> WhitespaceState {\n let mut state = 0;\n let mut len = self.text.len();\n for (i, c) in self.text.char_indices() {\n match c {\n ' ' | '\\t' => {\n state |= WhitespaceState::WHITESPACE;\n }\n '\\n' | '\\r' => {\n state |= WhitespaceState::WHITESPACE | WhitespaceState::CONTAINS_NEWLINE;\n }\n '\\x0b' => {\n state |= WhitespaceState::WHITESPACE | WhitespaceState::CONTAINS_VERTICAL_TAB;\n }\n _ => {\n len = i;\n break;\n }\n }\n }\n if len == 0 {\n WhitespaceState(0)\n } else {\n self.advance(len);\n WhitespaceState(state)\n }\n }\n\n fn parse_tag_name(&mut self) -> Result {\n let mut len = self.text.len();\n for (i, c) in self.text.char_indices() {\n match c {\n '0'..='9' | 'a'..='z' | 'A'..='Z' | '_' => {}\n '-' => {\n if i == 0 {\n len = 0;\n break;\n }\n }\n _ => {\n len = i;\n break;\n }\n }\n }\n if len > 0 {\n let id = self.text[..len].to_string();\n self.advance(len);\n Ok(id)\n } else {\n let parts = self.text.split_at(self.text.len().min(10));\n Err(OxcDiagnostic::error(format!(\"Invalid tag name: {}\", parts.0))\n .with_label(self.current_element().span))\n }\n }\n\n fn parse_attribute_name(&mut self) -> Result {\n let mut len = self.text.len();\n for (i, c) in self.text.char_indices() {\n match c {\n '0'..='9' | 'a'..='z' | 'A'..='Z' | '_' => {}\n '-' => {\n if i == 0 {\n len = 0;\n break;\n }\n }\n _ => {\n len = i;\n break;\n }\n }\n }\n if len > 0 {\n let id = self.text[..len].to_string();\n self.advance(len);\n Ok(id)\n } else {\n let parts = self.text.split_at(self.text.len().min(10));\n Err(OxcDiagnostic::error(format!(\"Invalid attribute name: {}\", parts.0))\n .with_label(self.current_element().span))\n }\n }\n\n fn parse_js_property(&mut self) -> Result {\n let mut len = self.text.len();\n for (i, c) in self.text.char_indices() {\n match c {\n '0'..='9' | 'a'..='z' | 'A'..='Z' | '_' | '$' => {}\n _ => {\n len = i;\n break;\n }\n }\n }\n if len > 0 {\n let id = self.text[..len].to_string();\n self.advance(len);\n Ok(id)\n } else {\n let parts = self.text.split_at(self.text.len().min(10));\n Err(OxcDiagnostic::error(format!(\"Invalid property name: {}\", parts.0))\n .with_label(self.current_element().span))\n }\n }\n\n fn parse_style_name(&mut self) -> Result {\n let mut len = self.text.len();\n for (i, c) in self.text.char_indices() {\n match c {\n '0'..='9' | 'a'..='z' | 'A'..='Z' | '-' | '_' => {}\n _ => {\n len = i;\n break;\n }\n }\n }\n if len > 0 {\n let id = self.text[..len].to_string();\n self.advance(len);\n Ok(id)\n } else {\n let parts = self.text.split_at(self.text.len().min(10));\n Err(OxcDiagnostic::error(format!(\"Invalid style name: {}\", parts.0))\n .with_label(self.current_element().span))\n }\n }\n\n fn parse_children_list(&mut self) -> Result, OxcDiagnostic> {\n let mut children = Vec::new();\n let mut whitespace_state = self.consume_whitespace();\n while !self.is_end() {\n if let Some(c) = self.peek_char() {\n if c == '<' {\n if whitespace_state.should_insert_whitespace() {\n children.push(TNode::space_text());\n }\n match self.peek_nth_char(1) {\n Some('/') => {\n break;\n }\n Some('!') => {\n self.parse_comment();\n }\n _ => {\n children.push(TNode::new(TNodeKind::Element(self.parse_element()?)));\n }\n }\n } else {\n children.push(TNode::new(TNodeKind::Text(self.parse_text(whitespace_state)?)));\n }\n } else {\n let index = self.consume_expr()?;\n if whitespace_state.should_insert_whitespace() {\n children.push(TNode::space_text());\n }\n children.push(TNode::new(TNodeKind::Expr(TExpr { index: ExprIndex(index) })));\n }\n\n whitespace_state = self.consume_whitespace();\n }\n Ok(children)\n }\n\n fn parse_comment(&mut self) {\n let mut len = self.text.len();\n for (i, c) in self.text.char_indices() {\n if c == '>' {\n len = i + 1;\n break;\n }\n }\n if len > 0 {\n self.advance(len);\n }\n }\n\n fn parse_element(&mut self) -> Result {\n self.advance(1);\n let tag = self.parse_tag_name()?;\n self.consume_whitespace();\n let properties = self.parse_attributes()?;\n\n let mut children = Vec::new();\n let mut void = false;\n if self.try_consume_char('/').is_some() {\n self.consume_char('>')?;\n } else {\n self.consume_char('>')?;\n\n if is_html_void_element(&tag) {\n void = true;\n } else {\n children = self.parse_children_list()?;\n self.consume_char('<')?;\n self.consume_char('/')?;\n self.advance(tag.len());\n self.consume_whitespace();\n self.consume_char('>')?;\n }\n }\n Ok(TElement { tag, properties, children, void })\n }\n\n fn parse_text(&mut self, whitespace_state: WhitespaceState) -> Result {\n let mut text = String::new();\n let mut len = self.text.len();\n let mut whitespace_state = whitespace_state;\n for (i, c) in self.text.char_indices() {\n match c {\n '<' => {\n len = i;\n break;\n }\n ' ' | '\\t' => {\n whitespace_state.0 |= WhitespaceState::WHITESPACE;\n continue;\n }\n '\\n' | '\\r' => {\n whitespace_state.0 |= WhitespaceState::CONTAINS_NEWLINE;\n continue;\n }\n '\\x0b' => {\n whitespace_state.0 |= WhitespaceState::CONTAINS_VERTICAL_TAB;\n continue;\n }\n _ => {}\n }\n if whitespace_state.0 & WhitespaceState::WHITESPACE != 0\n && (whitespace_state.0\n & (WhitespaceState::TEXT_CONTENT | WhitespaceState::CONTAINS_VERTICAL_TAB)\n != 0\n || whitespace_state.0 & WhitespaceState::CONTAINS_NEWLINE == 0)\n {\n text.push(' ');\n }\n whitespace_state.0 = WhitespaceState::TEXT_CONTENT;\n text.push(c);\n }\n if whitespace_state.should_insert_whitespace() {\n text.push(' ');\n }\n self.advance(len);\n if text.len() <= (1 << 16) {\n Ok(TText { value: text })\n } else {\n // Text nodes are splitted into two nodes when they exceed their length limit (64k).\n // https://github.com/chromium/chromium/blob/91159249db3086f17b28b7a060f55ec0345c24c7/third_party/blink/renderer/core/dom/text.h#L42\n Err(OxcDiagnostic::error(\"Text is too long (>64Kb)\")\n .with_label(self.current_element().span))\n }\n }\n\n fn parse_attributes(&mut self) -> Result, OxcDiagnostic> {\n let mut properties = Vec::new();\n\n while !self.is_end() {\n if let Some(c) = self.peek_char() {\n match c {\n '/' | '>' => {\n return Ok(properties);\n }\n '.' => {\n self.advance(1);\n let key = self.parse_js_property()?;\n self.consume_char('=')?;\n let expr_index = self.consume_expr()?;\n properties.push(TProperty::Value(TPropertyValue {\n key,\n value: ExprIndex(expr_index),\n }));\n }\n '*' => {\n self.advance(1);\n let key = self.parse_js_property()?;\n self.consume_char('=')?;\n let expr_index = self.consume_expr()?;\n properties.push(TProperty::DOMValue(TPropertyDOMValue {\n key,\n value: ExprIndex(expr_index),\n }));\n }\n '@' => {\n self.advance(1);\n let key = self.parse_js_property()?;\n self.consume_char('=')?;\n let expr_index = self.consume_expr()?;\n properties.push(TProperty::Event(TPropertyEvent {\n key,\n value: ExprIndex(expr_index),\n }));\n }\n '~' => {\n self.advance(1);\n let key = self.parse_style_name()?;\n self.consume_char('=')?;\n let value = if self.peek_char().is_some() {\n TPropertyStyleValue::String(self.parse_attribute_string()?)\n } else {\n TPropertyStyleValue::Expr(ExprIndex(self.consume_expr()?))\n };\n properties.push(TProperty::Style(TPropertyStyle { key, value }));\n }\n _ => {\n let key = self.parse_attribute_name()?;\n let mut hoist = false;\n let value;\n if self.try_consume_char('=').is_some() {\n if let Some('\"') = self.peek_char() {\n value =\n TPropertyAttributeValue::String(self.parse_attribute_string()?);\n } else {\n let expr_index = self.consume_expr()?;\n if key == \"class\" {\n let expr = &self.expressions[expr_index];\n // Hoist symbols from the root scope\n if is_hoistable_expr(expr, self.scoping) {\n hoist = true;\n }\n }\n value = TPropertyAttributeValue::Expr(THoistableExpr {\n index: ExprIndex(expr_index),\n hoist,\n });\n }\n } else {\n value = TPropertyAttributeValue::Bool;\n }\n properties.push(TProperty::Attribute(TPropertyAttribute { key, value }));\n }\n }\n } else {\n properties.push(TProperty::Directive(ExprIndex(self.consume_expr()?)))\n }\n self.consume_whitespace();\n }\n\n let parts = self.text.split_at(self.text.len().min(10));\n Err(OxcDiagnostic::error(format!(\"Expected a '>' char: {}\", parts.0))\n .with_label(self.current_element().span))\n }\n\n fn parse_attribute_string(&mut self) -> Result {\n let delim;\n let mut chars = self.text.char_indices();\n if let Some((_, c)) = chars.next() {\n match c {\n '\\'' | '\"' => {\n delim = c;\n }\n _ => {\n return Err(OxcDiagnostic::error(\n \"Invalid string value, it should start with '\\\"' char.\",\n )\n .with_label(self.current_element().span));\n }\n }\n for (i, c) in chars {\n if c == delim {\n let v = self.text[1..i].to_string();\n self.advance(i + 1);\n return Ok(v);\n }\n }\n Err(OxcDiagnostic::error(\"Invalid string value, it should end with '\\\"' char.\")\n .with_label(self.current_element().span))\n } else {\n Err(OxcDiagnostic::error(\"Invalid string value\")\n .with_label(self.current_element().span))\n }\n }\n}\n\n#[derive(Clone, Copy)]\nstruct WhitespaceState(u8);\n\nimpl WhitespaceState {\n const WHITESPACE: u8 = 1;\n const CONTAINS_NEWLINE: u8 = 1 << 1;\n const CONTAINS_VERTICAL_TAB: u8 = 1 << 2;\n const TEXT_CONTENT: u8 = 1 << 3;\n\n fn should_insert_whitespace(self) -> bool {\n self.0 & WhitespaceState::WHITESPACE != 0\n && (self.0 & WhitespaceState::CONTAINS_NEWLINE == 0\n || self.0 & WhitespaceState::CONTAINS_VERTICAL_TAB != 0)\n }\n}\n\n// RTL pass\nfn update_flags(node: &mut TNode) {\n _update_flags(node, 0);\n}\nfn _update_flags(node: &mut TNode, flags: u8) -> u8 {\n let mut flags = flags;\n if let TNodeKind::Element(e) = &mut node.kind {\n let mut props_exprs = 0;\n for p in &e.properties {\n match p {\n TProperty::Attribute(p) => {\n if let TPropertyAttributeValue::Expr(e) = &p.value\n && !e.hoist\n {\n props_exprs += 1;\n break;\n }\n }\n TProperty::Style(p) => {\n if let TPropertyStyleValue::Expr(_) = &p.value {\n props_exprs += 1;\n break;\n }\n }\n TProperty::Value(_)\n | TProperty::DOMValue(_)\n | TProperty::Event(_)\n | TProperty::Directive(_) => {\n props_exprs += 1;\n break;\n }\n }\n }\n\n let mut siblings_flags = 0;\n let mut children_exprs = 0;\n for c in e.children.iter_mut().rev() {\n match &mut c.kind {\n TNodeKind::Element(_) => {\n let f = _update_flags(c, siblings_flags);\n if f & TNode::HAS_EXPRESSIONS != 0 {\n flags |= TNode::HAS_EXPRESSIONS;\n siblings_flags |= TNode::HAS_NEXT_EXPRESSION | TNode::HAS_NEXT_DOM_NODE;\n } else {\n siblings_flags |= TNode::HAS_NEXT_DOM_NODE;\n }\n }\n TNodeKind::Text(_) => {\n c.flags = siblings_flags;\n siblings_flags |= TNode::HAS_NEXT_DOM_NODE;\n }\n TNodeKind::Expr(_) => {\n siblings_flags |= TNode::HAS_NEXT_EXPRESSION;\n c.flags = siblings_flags;\n children_exprs += 1;\n }\n }\n }\n\n if props_exprs > 0 || children_exprs > 0 {\n flags |= TNode::HAS_EXPRESSIONS;\n }\n node.flags = flags;\n node.props_exprs = props_exprs;\n node.children_exprs = children_exprs;\n }\n flags\n}\n\nfn assign_state_slots(node: &mut TNode) {\n _assign_state_slots(node, 1);\n}\n\nfn _assign_state_slots(node: &mut TNode, mut state_index: u16) -> u16 {\n if let TNodeKind::Element(e) = &mut node.kind {\n let mut prev_expr = false;\n for c in &mut e.children {\n match c.kind {\n TNodeKind::Element(_) => {\n if prev_expr {\n prev_expr = false;\n c.state_index = state_index;\n state_index += 1;\n } else if c.props_exprs > 0 || c.children_exprs > 0 {\n c.state_index = state_index;\n state_index += 1;\n }\n state_index = _assign_state_slots(c, state_index);\n }\n TNodeKind::Text(_) => {\n if prev_expr {\n prev_expr = false;\n c.state_index = state_index;\n state_index += 1;\n }\n }\n TNodeKind::Expr(_) => {\n prev_expr = true;\n }\n }\n }\n }\n\n state_index\n}\n\nfn is_hoistable_expr<'a>(expr: &Expression<'a>, scoping: &Scoping) -> bool {\n match expr {\n Expression::Identifier(id) => {\n let r = scoping.get_reference(id.reference_id());\n if let Some(symbol_id) = r.symbol_id()\n && scoping.symbol_scope_id(symbol_id) == scoping.root_scope_id()\n {\n return true;\n }\n }\n Expression::StaticMemberExpression(expr) => {\n return is_hoistable_expr(&expr.object, scoping);\n }\n _ => {}\n }\n false\n}\n" }, { "path": "docs/internals/dynamic-lists.md", "content": "# Dynamic Lists\n\nJust some reminders:\n\n## Lazy rendering\n\nIt may seem like a good idea to render dynamic lists lazily and even avoid\nstoring keys in memory, but it may lead to some subtle bugs with mutable\nentries.\n\n## Dynamic Lists with Immutable Entries\n\nIt is possible to create stateless node for immutable lists by storing\nentries, key function and render function in a stateless node. On initial\nmount we will need to invoke render function for each entry and keys can be\ncompletely ignored. And when dynamic list is updated, we can lazily recover\nold keys from previous entries.\n\nDon't think that it is worth it in most real-world scenarios, and we can\nalways just memoize stateless node with dynamic list in a component state.\n" }, { "path": "docs/internals/misc.md", "content": "# Misc\n\n## Type Casting\n\nThe current code base contains a lot of type casting. In idiomatic typescript\nit should be implemented with type guards, and if javascript toolchains\nsupported inlining in some reliable way instead of relying on their\nheuristics, the code could be way much cleaner with type guard functions.\n\n## Root Entry Functions\n\nEntry functions (update, dirtyCheck, unmount, etc) should save and restore\nrender context to avoid edge cases when they invoked synchronously in a\ndifferent root context.\n" }, { "path": "docs/internals/perf.md", "content": "# Perf\n\n## `var` vs `let`\n\nIn some places variables are declared with `var` instead of `let`, it is a\nmicro optimization that propably won't have any significant impact on\nperformance, especially when the JIT kicks in.\n\n```js\nfunction __var(i) {\n var j = i;\n return function _var() {\n return j;\n }\n}\n\nfunction __let(i) {\n let j = i;\n return function _let() {\n return j;\n };\n}\n```\n\nIn the example above, `_var` function will have the following bytecode in V8:\n\n```txt\nLdaImmutableCurrentContextSlot [2]\nReturn\n```\n\nAnd `_let` function:\n\n```txt\nLdaImmutableCurrentContextSlot [2]\nThrowReferenceErrorIfHole[0];\nReturn\n```\n\n## `if (a === true) {}` vs `if (a) {}`\n\nIn a lot of places there are explicit strict equality checks to avoid\n`toBool()` coercion. Sometimes we can avoid explicit checks when JIT compiler\nis going to inline functions and will be able to eliminate `toBool()`\ncoercion. For example, `_isArray()` calls doesn't use strict equality checks.\n`(a === true)`\n\n```txt\n0x738b024 24 488b5518 REX.W movq rdx, [rbp + 0x18];\n0x738b028 28 493995b0000000 REX.W cmpq[r13 + 0xb0](root(true_value)), rdx;\n0x738b02f 2f 0f8424000000 jz 0x738b059 < +0x59 >\n0x738b035 35 48b80000000014000000 REX.W movq rax, 0x1400000000;\n0x738b03f 3f 488b4de8 REX.W movq rcx, [rbp - 0x18];\n0x738b043 43 488be5 REX.W movq rsp, rbp;\n0x738b046 46 5d pop rbp;\n0x738b047 47 4883f902 REX.W cmpq rcx, 0x2;\n0x738b04b 4b 7f03 jg 0x738b050 < +0x50 >\n0x738b04d 4d c21000 ret 0x10;\n`(a)`, inlines `toBool()`\n0x618b024 24 488b5518 REX.W movq rdx, [rbp + 0x18];\n0x618b028 28 f6c201 testb rdx, 0x1;\n0x618b02b 2b 0f84a7000000 jz 0x618b0d8 < +0xd8 >\n0x618b031 31 493995b8000000 REX.W cmpq[r13 + 0xb8](root(false_value)), rdx;\n0x618b038 38 0f8459000000 jz 0x618b097 < +0x97 >\n0x618b03e 3e 493995c0000000 REX.W cmpq[r13 + 0xc0](root(empty_string)), rdx;\n0x618b045 45 0f844c000000 jz 0x618b097 < +0x97 >\n0x618b04b 4b 488b4aff REX.W movq rcx, [rdx - 0x1];\n0x618b04f 4f f6410d10 testb[rcx + 0xd], 0x10;\n0x618b053 53 0f853e000000 jnz 0x618b097 < +0x97 >\n0x618b059 59 49398d38010000 REX.W cmpq[r13 + 0x138](root(heap_number_map)), rcx;\n0x618b060 60 0f8484000000 jz 0x618b0ea < +0xea >\n0x618b066 66 49398db8010000 REX.W cmpq[r13 + 0x1b8](root(bigint_map)), rcx;\n0x618b06d 6d 0f846c000000 jz 0x618b0df < +0xdf >\n0x618b073 73 48b8000000000a000000 REX.W movq rax, 0xa00000000;\n0x618b07d 7d 488b4de8 REX.W movq rcx, [rbp - 0x18];\n0x618b081 81 488be5 REX.W movq rsp, rbp;\n0x618b084 84 5d pop rbp;\n0x618b085 85 4883f902 REX.W cmpq rcx, 0x2;\n0x618b089 89 7f03 jg 0x618b08e < +0x8e >\n0x618b08b 8b c21000 ret 0x10;\n```\n\n## Polymorphic Call-Sites\n\nIt is not always a good idea to optimize for monomorphic call-sites. If there\nis a low degree polymorphism, it can be better to use different shapes.\nIn some cases compiler can optimize several polymorphic call-sites and\nperform just one shape check. To understand how to reorganize code, so that\ncompiler could better optimize it, it is necessary to understand aliasing:\nhttps://en.wikipedia.org/wiki/Aliasing_(computing)\n\n## Additional Resources\n\n- https://v8.dev/docs/turbofan\n- https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html\n- https://benediktmeurer.de/2017/06/29/javascript-optimization-patterns-part2/\n- https://github.com/thlorenz/v8-perf/blob/master/language-features.md\n" }, { "path": "docs/internals/template-compiler.md", "content": "# Template Compiler\n\n## Markers\n\nComment markers `` should be inserted into template to delineate a slot\nposition for an expression when it is inserted between two text nodes. E.g.\n\n
prefix${expr}suffix
\n\nShould produce the following HTML template:\n\n
prefixsuffix
\n\n## OpCodes\n\nWhen properties `PropOpCode` are starting to update:\n\n- currentNode is assigned to template root node\n- properties are updated starting from the root node\n\nBecause of this invariants we can avoid adding SetNode opCode for root nodes.\n\nWhen children `ChildOpCode` are starting to update:\n\n- parentNode is assigned to root node\n- nextNode is assigned to null\n\nBecause of this invariants we can avoid generating state and children opcodes\nin cases like:\n\n```html\n
\n ${expr}\n
\n```\n\nHere we don't need to traverse DOM tree when mounting, because we already know\nits root node and dynamic child is positioned in the end. So, `stateOpCodes`\nshould be empty, and `childOpCodes` should have only `UpdateChild` opCode.\n\n## Ideas\n\n### SMI Arrays vs Strings for OpCodes\n\nIt is possible to encode OpCodes as strings and get deduplication via string\ninterning. OpCodes encoded as strings should also have smaller size and faster\nto parse. But overall it is probably not worth it.\n\n### Optimize PropOpCode encoding to reduce code size\n\nIn majority of templates, the size of expressions array, state array, etc\nis lower than 16. So instead of storing indexes in a contiguous set of bits,\nwe can store lowest bits in the first 4 bits and the rest in the highest\nbits, e.g.:\n\n```txt\nPropOpCode {\n type:3,\n expr_lo:4,\n data_lo:4,\n expr_hi:6,\n data_hi:..,\n}\n\nexpr = ((op >> 3) & Mask4) | ((op >> 11) & Mask6);\ndata = ((op >> 7) & Mask4) | (op >> 17);\n```\n\nAnd since we are deduplicating all data and storing it in a shared array,\nwe can sort it by the number of occurences in templates, so that indices for\nthe 16 most common keys will be able to fit into 4 bits.\n\n### Store string length in StateOpCodes to separate static text nodes\n\nIt is possible to avoid injecting `` comment nodes to separate static\nstrings by replacing remove opCode with split opCode that is going to store\nstring length.\n" }, { "path": "docs/misc/migrating-from-react.md", "content": "# Migrating From React\n\nThis document shows how to rewrite examples from the https://react.dev/learn/\ndocumentation with ivi API.\n\n## Table of Contents\n\n- [Describing the UI](#describing-the-ui)\n - [Your first component](#your-first-component)\n - [Importing and exporting component](#importing-and-exporting-components)\n - [Writing markup with JSX](#writing-markup-with-jsx)\n - [Javascript in JSX with curly braces](#javascript-in-jsx-with-curly-braces)\n - [Passing props to components](#passing-props-to-a-component)\n - [Conditional rendering](#conditional-rendering)\n - [Rendering lists](#rendering-lists)\n - [Keeping components pure](#keeping-components-pure)\n- [Adding interactivity](#adding-interactivity)\n - [Responding to events](#responding-to-events)\n - [State: a component's memory](#state-a-components-memory)\n - [Updating objects in state](#updating-objects-in-state)\n- [Managing state](#managing-state)\n - [Reacting to input with state](#reacting-to-input-with-state)\n - [Choosing the state structure](#choosing-the-state-structure)\n - [Preserving and resetting state](#preserving-and-resetting-state)\n - [Extracting state logic into a reducer](#extracting-state-logic-into-a-reducer)\n - [Passing data deeply with context](#passing-data-deeply-with-context)\n- [Escape hatches](#escape-hatches)\n - [Referencing values with refs](#referencing-values-with-refs)\n - [Manipulating the DOM with refs](#manipulating-the-dom-with-refs)\n - [Synchronizing with Effects](#synchronizing-with-effects)\n - [Removing Effect dependencies](#removing-effect-dependencies)\n - [Reusing logic with custom hooks](#reusing-logic-with-custom-hooks)\n\n## [Describing the UI](https://react.dev/learn/describing-the-ui)\n\n### [Your first component](https://react.dev/learn/describing-the-ui#your-first-component)\n\nReact:\n\n```js\nfunction Profile() {\n return (\n \n );\n}\n\nexport default function Gallery() {\n return (\n
\n

Amazing scientists

\n \n \n \n
\n );\n}\n```\n\nivi:\n\n```js\nimport { html } from 'ivi';\n\nconst Profile = () => html`\n \n`;\n\nconst Gallery = () => html`\n
\n

Amazing scientists

\n ${Profile()}\n ${Profile()}\n ${Profile()}\n
\n`;\nexport default Gallery;\n```\n\n### [Importing and exporting components](https://react.dev/learn/describing-the-ui#importing-and-exporting-components)\n\nReact:\n\n```js\nimport Profile from './Profile.js';\n\nexport default function Gallery() {\n return (\n
\n

Amazing scientists

\n \n \n \n
\n );\n}\n```\n\nivi:\n\n```js\nimport { html } from 'ivi';\nimport Profile from './Profile.js';\n\nconst Gallery = () => html`\n section\n h1 'Amazing scientists'\n ${Profile()}\n ${Profile()}\n ${Profile()}\n`;\n\nexport default Gallery;\n```\n\n### [Writing markup with JSX](https://react.dev/learn/describing-the-ui#writing-markup-with-jsx)\n\nReact:\n\n```js\nexport default function TodoList() {\n return (\n <>\n

Hedy Lamarr's Todos

\n \n
    \n
  • Invent new traffic lights
    • \n
  • Rehearse a movie scene
    • \n
  • Improve spectrum technology
    • \n
\n \n );\n}\n```\n\nivi:\n\n```js\nimport { html } from 'ivi';\n\nconst TodoList = () => html`\n

Hedy Lamarr's Todos

\n \n
    \n
  • Invent new traffic lights
    • \n
  • Rehearse a movie scene
    • \n
  • Improve spectrum technology
    • \n
\n`;\nexport default TodoList;\n```\n### [JavaScript in JSX with curly braces](https://react.dev/learn/describing-the-ui#javascript-in-jsx-with-curly-braces)\n\nReact:\n\n```js\nconst person = {\n name: 'Gregorio Y. Zara',\n theme: {\n backgroundColor: 'black',\n color: 'pink'\n }\n};\n\nexport default function TodoList() {\n return (\n
\n

{person.name}'s Todos

\n \n
    \n
  • Improve the videophone
    • \n
  • Prepare aeronautics lectures
    • \n
  • Work on the alcohol-fuelled engine
    • \n
\n
\n );\n}\n```\n\nivi:\n\n```js\nconst person = {\n name: 'Gregorio Y. Zara',\n theme: {\n backgroundColor: 'black',\n color: 'pink'\n }\n};\n\nconst TodoList = () => html`\n \n

${person.name}'s Todos

\n \n
    \n
  • Improve the videophone
    • \n
  • Prepare aeronautics lectures
    • \n
  • Work on the alcohol-fuelled engine
    • \n
\n \n`;\nexport default TodoList;\n```\n\n### [Passing props to a component](https://react.dev/learn/describing-the-ui#passing-props-to-a-component)\n\nReact:\n\n```jsx\nimport { getImageUrl } from './utils.js'\n\nexport default function Profile() {\n return (\n \n \n \n );\n}\n```\n\nivi:\n\n```js\nimport { getImageUrl } from './utils.js'\n\nconst Profile = () => (\n Card(\n Avatar({\n size: 100,\n person: {\n name: 'Katsuko Saruhashi',\n imageId: 'YfeOqp2'\n },\n }),\n )\n);\nexport default Profile;\n```\n\n### [Conditional Rendering](https://react.dev/learn/describing-the-ui#conditional-rendering)\n\nReact:\n\n```js\nfunction Item({ name, isPacked }) {\n return (\n
  • \n {name} {isPacked && '✔'}\n
    • \n );\n}\n\nexport default function PackingList() {\n return (\n
    \n

    Sally Ride's Packing List

    \n
      \n \n \n \n
    \n
    \n );\n}\n```\n\nivi:\n\n```js\nimport { html } from \"ivi\";\n\nconst Item = ({ name, isPacked }) => html`\n
  • \n ${name} ${isPacked && '✔'}\n
    • \n`;\n\nconst PackingList = () => html`\n
    \n

    Sally Ride's Packing List

    \n
      \n ${Item({ isPacked: true, name: 'Space suit' })}\n ${Item({ isPacked: true, name: 'Helmet with a golden leaf' })}\n ${Item({ isPacked: false, name: 'Photo of Tam' })}\n
    \n
    \n`;\nexport default PackingList;\n```\n\n### [Rendering lists](https://react.dev/learn/describing-the-ui#rendering-lists)\n\nReact:\n\n```js\nimport { people } from './data.js';\nimport { getImageUrl } from './utils.js';\n\nexport default function List() {\n const listItems = people.map(person =>\n
  • \n \n

    \n {person.name}:\n {' ' + person.profession + ' '}\n known for {person.accomplishment}\n

    \n
    • \n );\n return (\n
    \n

    Scientists

    \n
      {listItems}
    \n
    \n );\n}\n```\n\nivi:\n\n```js\nimport { List } from 'ivi';\nimport { html } from 'ivi';\nimport { people } from './data.js';\nimport { getImageUrl } from './utils.js';\n\nconst ScientistsList = () => html`\n
    \n

    Scientists

    \n
      \n ${List(people, (person) => person.id, (person) => html`\n
    • \n \n

      \n ${person.name}:\n \\v ${person.profession}\n \\v known for ${person.accomplishment}\n

      \n
      • \n `)}\n
    \n
    \n`;\nexport default ScientistsList;\n```\n\n### [Keeping components pure](https://react.dev/learn/describing-the-ui#keeping-components-pure)\n\nReact:\n\n```js\nfunction Cup({ guest }) {\n return

    Tea cup for guest #{guest}

    ;\n}\n\nexport default function TeaSet() {\n return (\n <>\n \n \n \n \n );\n}\n```\n\nivi:\n\n```js\nimport { html } from 'ivi';\n\nconst Cup = ({ guest }) => html`\n

    Tea cup for guest #${guest}

    \n`;\n\nconst TeaSet = () => [\n Cup({ guest: 1 }),\n Cup({ guest: 2 }),\n Cup({ guest: 3 }),\n];\nexport default TeaSet;\n```\n\n## [Adding Interactivity](https://react.dev/learn/adding-interactivity)\n\n### [Responding to events](https://react.dev/learn/adding-interactivity#responding-to-events)\n\nReact:\n\n```js\nexport default function App() {\n return (\n alert('Playing!')}\n onUploadImage={() => alert('Uploading!')}\n />\n );\n}\n\nfunction Toolbar({ onPlayMovie, onUploadImage }) {\n return (\n
    \n \n \n
    \n );\n}\n\nfunction Button({ onClick, children }) {\n return (\n \n );\n}\n```\n\nivi:\n\n```js\nimport { component, useState } from 'ivi';\nimport { html } from 'ivi';\n\nconst App = component((c) => {\n const onPlayMovie = () => alert('Playing!');\n const onUploadImage = () => alert('Uploading!');\n return () => ToolBar({ onPlayMovie, onUploadImage });\n});\nexport default App;\n\nconst Toolbar = ({ onPlayMovie, onUploadImage }) => html`\n
    \n ${Button({ onClick: onPlayMovie, children: 'Play Movie' })}\n ${Button({ onClick: onUploadImage, children: 'Upload Image' })}\n
    \n`;\n\nconst Button = ({ onClick, children }) => html`\n \n`;\n```\n\n### [State: a component’s memory](https://react.dev/learn/adding-interactivity#state-a-components-memory)\n\nReact:\n\n```js\nimport { useState } from 'react';\nimport { sculptureList } from './data.js';\n\nexport default function Gallery() {\n const [index, setIndex] = useState(0);\n const [showMore, setShowMore] = useState(false);\n\n function handleNextClick() {\n setIndex(index + 1);\n }\n\n function handleMoreClick() {\n setShowMore(!showMore);\n }\n\n let sculpture = sculptureList[index];\n return (\n <>\n \n

    \n {sculpture.name} \n by {sculpture.artist}\n

    \n

    \n ({index + 1} of {sculptureList.length})\n

    \n \n {showMore &&

    {sculpture.description}

    }\n \n \n );\n}\n```\n\nivi:\n\n```js\nimport { component, useState } from 'ivi';\nimport { html } from 'ivi';\nimport { sculptureList } from './data.js';\n\nconst Gallery = () => {\n const [index, setIndex] = useState(0);\n const [showMore, setShowMore] = useState(false);\n\n function handleNextClick() {\n setIndex(index + 1);\n }\n\n function handleMoreClick() {\n setShowMore(!showMore);\n }\n\n return () => {\n const index = index();\n const showMore = showMore();\n const sculpture = sculptureList[index];\n return html`\n \n

    \n ${sculpture.name}\n \\v by ${sculpture.artist}\n

    \n

    (${index + 1} of ${sculptureList.length}

    \n \n ${showMore && html`

    ${sculpture.description}

    `}\n \n `;\n };\n}\nexport default Gallery;\n```\n\n### [State as a snapshot](https://react.dev/learn/adding-interactivity#state-as-a-snapshot)\n\nReact:\n\n```js\nconsole.log(count); // 0\nsetCount(count + 1); // Request a re-render with 1\nconsole.log(count); // Still 0!\n```\n\nivi:\n\nLike regular javascript variables, ivi state is updated immediately.\n\n```js\nconsole.log(count()); // 0\nsetCount(count() + 1); // Request a re-render with 1\nconsole.log(count()); // 1\n```\n\n### [Updating objects in state](https://react.dev/learn/adding-interactivity#updating-objects-in-state)\n\nReact:\n\n```js\nimport { useState } from 'react';\n\nexport default function Form() {\n const [person, setPerson] = useState({\n name: 'Niki de Saint Phalle',\n artwork: {\n title: 'Blue Nana',\n city: 'Hamburg',\n image: 'https://i.imgur.com/Sd1AgUOm.jpg',\n }\n });\n\n function handleNameChange(e) {\n setPerson({\n ...person,\n name: e.target.value\n });\n }\n\n function handleTitleChange(e) {\n setPerson({\n ...person,\n artwork: {\n ...person.artwork,\n title: e.target.value\n }\n });\n }\n\n function handleCityChange(e) {\n setPerson({\n ...person,\n artwork: {\n ...person.artwork,\n city: e.target.value\n }\n });\n }\n\n function handleImageChange(e) {\n setPerson({\n ...person,\n artwork: {\n ...person.artwork,\n image: e.target.value\n }\n });\n }\n\n return (\n <>\n \n \n \n \n

    \n {person.artwork.title}\n {' by '}\n {person.name}\n
    \n (located in {person.artwork.city})\n

    \n \n \n );\n}\n```\n\nivi:\n\n```js\nimport { component, useState } from 'ivi';\nimport { html } from 'ivi';\n\nconst Form = component((c) => {\n const [person, setPerson] = useState(c, {\n name: 'Niki de Saint Phalle',\n artwork: {\n title: 'Blue Nana',\n city: 'Hamburg',\n image: 'https://i.imgur.com/Sd1AgUOm.jpg',\n }\n });\n\n function handleNameChange(e) {\n setPerson({\n ...person(),\n name: e.target.value\n });\n }\n\n function handleTitleChange(e) {\n const p = person();\n setPerson({\n ...p,\n artwork: {\n ...p.artwork,\n title: e.target.value\n }\n });\n }\n\n function handleCityChange(e) {\n const p = person();\n setPerson({\n ...p,\n artwork: {\n ...p.artwork,\n city: e.target.value\n }\n });\n }\n\n function handleImageChange(e) {\n const p = person();\n setPerson({\n ...p,\n artwork: {\n ...p.artwork,\n image: e.target.value\n }\n });\n }\n\n return () => {\n const p = person();\n return html`\n \n \n \n \n

    \n ${p.artwork.title}\n \\v by ${p.name}\n
    \n (located in ${p.artwork.city} )\n

    \n \n `;\n };\n});\nexport default Form;\n```\n\n## [Managing State](https://react.dev/learn/managing-state)\n\n### [Reacting to input with state](https://react.dev/learn/managing-state#reacting-to-input-with-state)\n\nReact:\n\n```js\n\nimport { useState } from 'react';\n\nexport default function Form() {\n const [answer, setAnswer] = useState('');\n const [error, setError] = useState(null);\n const [status, setStatus] = useState('typing');\n\n if (status === 'success') {\n return

    That's right!

    \n }\n\n async function handleSubmit(e) {\n e.preventDefault();\n setStatus('submitting');\n try {\n await submitForm(answer);\n setStatus('success');\n } catch (err) {\n setStatus('typing');\n setError(err);\n }\n }\n\n function handleTextareaChange(e) {\n setAnswer(e.target.value);\n }\n\n return (\n <>\n

    City quiz

    \n

    \n In which city is there a billboard that turns air into drinkable water?\n

    \n
    \n \n
    \n \n {error !== null &&\n

    \n {error.message}\n

    \n }\n \n \n );\n}\n\nfunction submitForm(answer) {\n // Pretend it's hitting the network.\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n let shouldError = answer.toLowerCase() !== 'lima'\n if (shouldError) {\n reject(new Error('Good guess but a wrong answer. Try again!'));\n } else {\n resolve();\n }\n }, 1500);\n });\n}\n```\n\nivi:\n\n```js\nimport { component, useState } from 'ivi';\nimport { html } from 'ivi';\n\nconst Form = component((c) => {\n const [answer, setAnswer] = useState('');\n const [error, setError] = useState(null);\n const [status, setStatus] = useState('typing');\n\n async function handleSubmit(e) {\n e.preventDefault();\n const answer = answer();\n setStatus('submitting');\n try {\n await submitForm(answer);\n setStatus('success');\n } catch (err) {\n setStatus('typing');\n setError(err);\n }\n }\n\n function handleTextareaChange(e) {\n setAnswer(e.target.value);\n }\n\n return () => {\n if (status() === 'success') {\n return html`h1 'That's right!`;\n }\n return html`\n

    City quiz

    \n

    \n In which city is there a billboard that turns air into drinkable water?\n

    \n
    \n \n
    \n \n ${error() && html`

    ${error().message}

    `}\n \n `;\n };\n});\n\nfunction submitForm(answer) {\n // Pretend it's hitting the network.\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n let shouldError = answer.toLowerCase() !== 'lima'\n if (shouldError) {\n reject(new Error('Good guess but a wrong answer. Try again!'));\n } else {\n resolve();\n }\n }, 1500);\n });\n}\n```\n\n### [Choosing the state structure](https://react.dev/learn/managing-state#choosing-the-state-structure)\n\nReact:\n\n```js\nimport { useState } from 'react';\n\nexport default function Form() {\n const [firstName, setFirstName] = useState('');\n const [lastName, setLastName] = useState('');\n\n const fullName = firstName + ' ' + lastName;\n\n function handleFirstNameChange(e) {\n setFirstName(e.target.value);\n }\n\n function handleLastNameChange(e) {\n setLastName(e.target.value);\n }\n\n return (\n <>\n

    Let’s check you in

    \n \n \n

    \n Your ticket will be issued to: {fullName}\n

    \n \n );\n}\n```\n\nivi:\n\n```js\nimport { component, useState } from 'ivi';\nimport { html } from 'ivi';\n\nconst Form = component((c) => {\n const [firstName, setFirstName] = useState(c, '');\n const [lastName, setLastName] = useState(c, '');\n\n function handleFirstNameChange(e) {\n setFirstName(e.target.value);\n }\n\n function handleLastNameChange(e) {\n setLastName(e.target.value);\n }\n\n return () => {\n const fullName = firstName + ' ' + lastName;\n\n return html`\n

    Let's check you in

    \n \n