@motionscript/code 0.1.0-alpha.0 → 0.1.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +96 -0
- package/NOTICE +49 -0
- package/README.md +148 -50
- package/dist/browser/THIRD_PARTY_LICENSES.txt +431 -0
- package/dist/browser/index.js +10 -7
- package/dist/browser/index.js.map +3 -3
- package/dist/browser/manifest.json +85 -3
- package/dist/code-range.d.ts +7 -1
- package/dist/code-range.d.ts.map +1 -1
- package/dist/code-range.js +9 -1
- package/dist/code-range.js.map +1 -1
- package/dist/diff.d.ts +14 -0
- package/dist/diff.d.ts.map +1 -1
- package/dist/diff.js +134 -2
- package/dist/diff.js.map +1 -1
- package/dist/engine.d.ts +2 -2
- package/dist/engine.d.ts.map +1 -1
- package/dist/engine.js +4 -4
- package/dist/engine.js.map +1 -1
- package/dist/highlight.d.ts +10 -2
- package/dist/highlight.d.ts.map +1 -1
- package/dist/highlight.js +40 -6
- package/dist/highlight.js.map +1 -1
- package/dist/layout.d.ts +1 -1
- package/dist/layout.d.ts.map +1 -1
- package/dist/layout.js.map +1 -1
- package/dist/measure-cache.d.ts +2 -2
- package/dist/measure-cache.d.ts.map +1 -1
- package/dist/measure-cache.js +0 -0
- package/dist/measure-cache.js.map +1 -1
- package/dist/node.d.ts +275 -281
- package/dist/node.d.ts.map +1 -1
- package/dist/node.js +634 -700
- package/dist/node.js.map +1 -1
- package/dist/nodes.d.ts +6 -9
- package/dist/nodes.d.ts.map +1 -1
- package/dist/nodes.js +7 -9
- package/dist/nodes.js.map +1 -1
- package/dist/render.d.ts +10 -3
- package/dist/render.d.ts.map +1 -1
- package/dist/render.js +60 -1
- package/dist/render.js.map +1 -1
- package/dist/style.d.ts +3 -3
- package/dist/style.d.ts.map +1 -1
- package/dist/style.js +10 -6
- package/dist/style.js.map +1 -1
- package/dist/tokens.d.ts.map +1 -1
- package/dist/tokens.js +5 -1
- package/dist/tokens.js.map +1 -1
- package/dist/transitions.d.ts +19 -1
- package/dist/transitions.d.ts.map +1 -1
- package/dist/transitions.js.map +1 -1
- package/package.json +7 -4
- package/src/code-range.ts +10 -1
- package/src/diff.ts +137 -2
- package/src/engine.ts +5 -5
- package/src/highlight.ts +54 -5
- package/src/layout.ts +1 -1
- package/src/measure-cache.ts +0 -0
- package/src/node.ts +767 -747
- package/src/nodes.ts +8 -10
- package/src/render.ts +71 -3
- package/src/style.ts +11 -7
- package/src/tokens.ts +5 -1
- package/src/transitions.ts +21 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,101 @@
|
|
|
1
1
|
# @motionscript/code
|
|
2
2
|
|
|
3
|
+
## 0.1.0-alpha.10
|
|
4
|
+
|
|
5
|
+
## 0.1.0-alpha.9
|
|
6
|
+
|
|
7
|
+
## 0.1.0-alpha.8
|
|
8
|
+
|
|
9
|
+
## 0.1.0-alpha.7
|
|
10
|
+
|
|
11
|
+
## 0.1.0-alpha.6
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- 163b708: Node types are components: one spec object handed to `component2d`, `component3d` or `componentAudio`, with no classes, decorators or JSX.
|
|
16
|
+
|
|
17
|
+
- **Writing a node type.** A component is one object literal: `key`, `state` (literals and `Types`), `defaults`, `commands`, `children`, `allowedChildren`/`allowedParents`, `provide`, `load`, and its tree's own fields (`measure`, `layout`, `render` for 2D). Behaviour comes from modules you spread in and call: `Paint`, `Flow`, `Shapes`, `Typeface`, `TextLayout`, `Aim`, `Material`, `View3D`. ADR 0007 and the custom-node docs cover it.
|
|
18
|
+
- **Building nodes in code** uses calls: `Rect({ fill: 'tomato', children: [Text({ text: 'Hi' })] })`, or `new Rect({...})` for the node itself.
|
|
19
|
+
- **Every built-in and every kit node is a component**, under the same document key. Code that tested `instanceof` a class now uses the component's `.is`, or `instanceof X.node`. Changed members:
|
|
20
|
+
- `SurfacePlot3d.valueAt` and `FunctionPlot.valueAt` are now the functions `surfaceValueAt` and `curveValue`.
|
|
21
|
+
- A system's `coordinates` is replaced by `planeMap`/`axesMap`/`systemMap`.
|
|
22
|
+
- `PieChart.isSelected` is replaced by `isSliceSelected`.
|
|
23
|
+
- `ItemGrid` is a kit module (`ItemGrid.isGrid`, `ItemGrid.define`), not a base class.
|
|
24
|
+
- **The sdk no longer exports the class surface:**
|
|
25
|
+
- the decorators: `node`, `property` and every `*Property`, `command`, `withdraw`, `driveCommand`;
|
|
26
|
+
- the authoring bases: `PaintNode`, `ShapeNode`, `TextBase`, `Mesh3DBase`, `Canvas3DBase` and the `*Base` geometry classes;
|
|
27
|
+
- `asCommand`, `compose`, `drive` and `declarePaints` from `@motionscript/sdk/component`;
|
|
28
|
+
- the `jsx-runtime` and `jsx-dev-runtime` subpaths.
|
|
29
|
+
- `Node`, `Node2D`, `Node3D` and `NodeAudio` remain as types.
|
|
30
|
+
- **Editor metadata leaves the engine.** The kits no longer declare `parentKey`, `forkable`, `layout`, `seed`, `within`, `beside` or `closed`; a host keeps those in its own configs. `describe()` now reports `holds`, the trees a type takes children from, and the placement checks use it, so a 2D viewport of your own that takes 3D children places them.
|
|
31
|
+
- A command called from code with no argument runs, and a refused child is told what its parent takes (`allowedChildren`) or where it goes (`allowedParents`).
|
|
32
|
+
|
|
33
|
+
## 0.1.0-alpha.5
|
|
34
|
+
|
|
35
|
+
### Patch Changes
|
|
36
|
+
|
|
37
|
+
- da6f97a: Every package ships a `NOTICE`, and a browser build lists what it bundles.
|
|
38
|
+
|
|
39
|
+
- Each tarball carries the repository `NOTICE`: the copyright line and the MIT attributions for the noise functions in `skia-render`'s fractal-noise fill (David Hoskins' "Hash without Sine", Inigo Quilez's 2D simplex noise).
|
|
40
|
+
- `@motionscript/canvaskit` ships `THIRD_PARTY_NOTICES.txt` with the licences of the libraries compiled into the binary: FreeType, HarfBuzz, ICU 74, zlib, libpng, Brotli, WOFF2, Emscripten and musl.
|
|
41
|
+
- `dist/browser/manifest.json` gains `thirdParty`, the packages the browser build bundled (`name`, `version`, `license`), and their licence and NOTICE files are written to `dist/browser/THIRD_PARTY_LICENSES.txt`. `@motionscript/browser` bundles mediabunny (MPL-2.0, unmodified; source at https://github.com/Vanilagy/mediabunny), esbuild-wasm and three; `@motionscript/math` bundles MathJax.
|
|
42
|
+
|
|
43
|
+
- 1778355: The published packages carry what a user needs and say what they are.
|
|
44
|
+
|
|
45
|
+
- `@motionscript/code` no longer ships `dist/tests/diff.bench.*`, and `@motionscript/math` no longer ships `dist/tests/harness.*` or `mathjax.setup.*`: test helpers under a `tests` folder are left out of every package's build.
|
|
46
|
+
- `@motionscript/sdk`'s description no longer repeats core's, and `@motionscript/math`'s names the coordinate systems, plots, 3D graphs and network graphs it has as well as formulas.
|
|
47
|
+
- The READMEs of `@motionscript/canvaskit`, `@motionscript/charts`, `@motionscript/geo`, `@motionscript/grids`, `@motionscript/skia-render` and `@motionscript/geography` say what to install, and `@motionscript/sdk`'s example now opens the document in an engine and plays it. Links between packages point at the repository, so they work on npm.
|
|
48
|
+
|
|
49
|
+
## 0.1.0-alpha.4
|
|
50
|
+
|
|
51
|
+
### Minor Changes
|
|
52
|
+
|
|
53
|
+
- c9535a6: `Code` can mark whole rows, beside dimming what is outside a range.
|
|
54
|
+
|
|
55
|
+
- `highlightRows` (`target`, `color`, `radius`) lays a band behind every line a range touches, across the block and under the text. A second call slides and resizes the band onto its new rows; several ranges give a band each, and one with no counterpart fades. A band is tied to its lines, so it moves with them through an `append`, `insert` or `remove`.
|
|
56
|
+
- `resetRowHighlight` fades the bands out.
|
|
57
|
+
- `drawCode` takes the bands as optional fields of its state (`rowBands`, `rowsEdit`, `boxW`), so a caller that draws a listing itself is unaffected.
|
|
58
|
+
|
|
59
|
+
### Patch Changes
|
|
60
|
+
|
|
61
|
+
- 3ba3e98: A `code` node reports what it cannot highlight, follows its `language` and `theme`, reads Windows line endings, and diffs long edits within a budget.
|
|
62
|
+
|
|
63
|
+
- An unknown language, a grammar whose import is rejected and an unknown theme name each logged nothing and fell back silently. Each now logs one `[Code]` warning per name, with the import's reason where there is one. `''`, `text` and `plaintext` mean plain text and stay silent.
|
|
64
|
+
- A tweened or bound `theme` or `language` left the old colours once any listing command had run, because only `set()` re-tokenized. The listing now re-derives from `code`, `language` and `theme` on every read, and a theme-only change keeps the token ids a highlight names.
|
|
65
|
+
- `\r\n` and a lone `\r` are line breaks, in `code`, in the text a command brings in and in `to({ code })`; they used to survive as a character at the end of each line. `normalizeSource` is exported from the engine barrel.
|
|
66
|
+
- The kit's own commands (`append`, `prepend`, `insert`, `remove`, `replace`, `highlight`, `resetHighlight`, `to`) run their duration and write nothing on a node that is not in a tree.
|
|
67
|
+
- Aligning the lines of an edit was quadratic (741 ms for 1,000 lines). Lines equal at either end and lines that occur once on both sides now anchor the alignment, and only the runs between anchors are compared, within `LINE_ALIGN_CELLS` per run and `EDIT_ALIGN_CELLS` per edit; a larger run leaves and enters as whole rows. `pnpm bench` measures it.
|
|
68
|
+
|
|
69
|
+
- ad28707: Component kit fixes.
|
|
70
|
+
|
|
71
|
+
- Charts: a bar chart maps its columns across the plot panel as laid out (and takes the line chart's top headroom), so a column ends on its marker's grid line. A pie chart's wedges, labels and legend follow `data` and the palette once they are set. A restated value-axis or y/x-axis `range` or `ticks` in `to()` rescales continuously from the axis as drawn, instead of cutting at the midpoint. Without a legend (or without series) the entrance keeps that beat's share, so the call-out and legend land where the slot lays them out. A constant line series gets a scale with width, a `NaN` or infinite cell reads as 0, and tick captions gain decimals when the step is finer than 0.1.
|
|
72
|
+
- Code: the compiled highlighter is cached per style object, so two styles sharing a name no longer colour alike. A `CodeRanges` chain serialises as its ranges, so a stored `highlight` target selects what it did before it was saved.
|
|
73
|
+
- LaTeX: seeking from inside a morph to a time before it restores the source formula instead of leaving the last morph frame.
|
|
74
|
+
- Geo: custom border rings are wound for d3, so a GeoJSON counter-clockwise ring draws as the small region it encloses; a great-circle path between antipodal points runs over the north pole instead of wherever rounding lands.
|
|
75
|
+
- Audio: bottom-aligned waveform bars stand on the floor of the box instead of hanging from the top.
|
|
76
|
+
- `Code` and `Latex` take an optional props bag, so `new Registry({ nodes: NODES })` and `createBrowserEngine({ nodes: NODES })` type-check without a cast.
|
|
77
|
+
|
|
78
|
+
## 0.1.0-alpha.3
|
|
79
|
+
|
|
80
|
+
### Patch Changes
|
|
81
|
+
|
|
82
|
+
- 4b23387: A `code` node draws the listing its props describe until its first command starts.
|
|
83
|
+
|
|
84
|
+
- The structure, highlight and in-flight transitions the listing commands own live outside the props, and only a command that had started wrote them, so before the first one a frame showed whatever the last evaluation left: the end of every command. A listing appended to at 1 s drew the new rows from 0 s, and a `highlight` at 0.8 s, as in the README's own example, dimmed the listing from 0 s, jumped to full brightness when it started, then faded back. A seek back past an edit or a highlight also left it drawn mid-transition. Until a command applies, all three are now derived from the props, so a frame is the same however the playhead reached it, and a highlight still selects the tokens it was built against when a later edit returns the source to the same text.
|
|
85
|
+
- The README says what the host supplies: a monospaced face under `fontFamily` (`Fira Mono` by default) in the engine's asset manifest, without which the listing draws no text or falls back to another registered face.
|
|
86
|
+
|
|
87
|
+
## 0.1.0-alpha.2
|
|
88
|
+
|
|
89
|
+
### Patch Changes
|
|
90
|
+
|
|
91
|
+
- 0227e28: A document's `remove` command on a `code` node erases its `target` range. It used to reach `Node.remove` instead of `Code.erase` and leave the listing as it was.
|
|
92
|
+
|
|
93
|
+
## 0.1.0-alpha.1
|
|
94
|
+
|
|
95
|
+
### Minor Changes
|
|
96
|
+
|
|
97
|
+
- 59cecba: Build on `@motionscript/sdk` instead of `@motionscript/core`. The peer dependency is now `@motionscript/sdk`, every import goes through it (and `@motionscript/sdk/component` for the component machinery), and the browser build leaves `@motionscript/sdk` an import, so an import map names it once. A component copied with `ms add` imports the SDK too, and its registry item depends on `@motionscript/sdk` rather than `@motionscript/core`. `@motionscript/charts/kit` re-exports `@motionscript/sdk/component` where it re-exported `@motionscript/core/component`.
|
|
98
|
+
|
|
3
99
|
## 0.1.0-alpha.0
|
|
4
100
|
|
|
5
101
|
Initial release.
|
package/NOTICE
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
Motionscript
|
|
2
|
+
Copyright 2026 Motionscript LLC
|
|
3
|
+
|
|
4
|
+
This product includes the third-party code below, each part under the MIT
|
|
5
|
+
License reproduced at the end of this file.
|
|
6
|
+
|
|
7
|
+
- packages/renderer/crates/renderer/src/shaders/prim.wgsl (`fn_hash2`):
|
|
8
|
+
"Hash without Sine" by David Hoskins (https://www.shadertoy.com/view/4djSRW).
|
|
9
|
+
Copyright (c) 2014 David Hoskins.
|
|
10
|
+
|
|
11
|
+
- packages/renderer/crates/renderer/src/shaders/prim.wgsl (`simplex_noise`): "Noise - simplex - 2D" by Inigo Quilez
|
|
12
|
+
(https://www.shadertoy.com/view/Msf3WH). Copyright (c) 2013 Inigo Quilez.
|
|
13
|
+
|
|
14
|
+
- packages/renderer/crates/render3d (in @motionscript/renderer's WebAssembly):
|
|
15
|
+
its shaders (src/shaders/mesh.wgsl) port three.js r185's mesh programs and
|
|
16
|
+
src/geometry.rs its primitive generators (https://threejs.org).
|
|
17
|
+
Copyright (c) 2010-2026 three.js authors.
|
|
18
|
+
|
|
19
|
+
@motionscript/renderer's WebAssembly (dist/ms_renderer_bg.wasm) compiles in
|
|
20
|
+
Rust crates under MIT, Apache-2.0, Zlib and Unicode-3.0 terms (wgpu, naga,
|
|
21
|
+
harfrust, read-fonts, kurbo, wasm-bindgen and others); their notices are in
|
|
22
|
+
packages/renderer/THIRD_PARTY_NOTICES.txt.
|
|
23
|
+
|
|
24
|
+
MP3 export loads @mediabunny/mp3-encoder (MPL-2.0), a WebAssembly build of
|
|
25
|
+
the LAME MP3 encoder (LGPL, https://lame.sourceforge.io), on first use.
|
|
26
|
+
|
|
27
|
+
The browser builds under dist/browser/ bundle each package's npm dependencies;
|
|
28
|
+
dist/browser/THIRD_PARTY_LICENSES.txt in each package lists them with their
|
|
29
|
+
licences.
|
|
30
|
+
|
|
31
|
+
MIT License
|
|
32
|
+
|
|
33
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
34
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
35
|
+
in the Software without restriction, including without limitation the rights
|
|
36
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
37
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
38
|
+
furnished to do so, subject to the following conditions:
|
|
39
|
+
|
|
40
|
+
The above copyright notice and this permission notice shall be included in all
|
|
41
|
+
copies or substantial portions of the Software.
|
|
42
|
+
|
|
43
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
44
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
45
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
46
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
47
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
48
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
49
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,70 +1,168 @@
|
|
|
1
1
|
# @motionscript/code
|
|
2
2
|
|
|
3
|
-
Animated, syntax-highlighted code
|
|
4
|
-
The `Code` node
|
|
5
|
-
edits at the token level
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}
|
|
3
|
+
Animated, syntax-highlighted code listings for [Motion Script](https://motionscript.dev).
|
|
4
|
+
The `Code` node highlights source with [Lezer](https://lezer.codemirror.net)
|
|
5
|
+
grammars and animates edits at the token level: each edit is diffed against the
|
|
6
|
+
listing it becomes, so tokens that survive travel to their new columns, removed
|
|
7
|
+
ones fade out and new ones fade in, rather than the listing snapping.
|
|
8
|
+
|
|
9
|
+
Hand `Code` to the engine through your project entry's `nodes`, and any
|
|
10
|
+
document that engine opens can name it as `code`:
|
|
11
|
+
|
|
12
|
+
```ts
|
|
13
|
+
// src/project.ts
|
|
14
|
+
import { Code } from '@motionscript/code';
|
|
15
|
+
|
|
16
|
+
export const nodes = [Code];
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```ts
|
|
20
|
+
import type { CompositionDocument } from '@motionscript/sdk';
|
|
21
|
+
import { lines } from '@motionscript/code';
|
|
22
|
+
|
|
23
|
+
export default {
|
|
24
|
+
kind: 'composition',
|
|
25
|
+
nodes: [
|
|
26
|
+
{ id: 'listing', type: 'code', parentId: null, layerOrder: 0,
|
|
27
|
+
props: { code: 'function greet(name) {\n return "hi";\n}', language: 'typescript',
|
|
28
|
+
theme: 'github-dark', fontSize: 28 } },
|
|
29
|
+
],
|
|
30
|
+
commands: [
|
|
31
|
+
{ id: 'call', type: 'append', targetId: 'listing', at: 0, duration: 0.6,
|
|
32
|
+
args: { code: '\ngreet("world");' } },
|
|
33
|
+
{ id: 'focus', type: 'highlight', targetId: 'listing', at: 0.8, duration: 0.4,
|
|
34
|
+
args: { target: lines(2) } },
|
|
35
|
+
],
|
|
36
|
+
} satisfies CompositionDocument;
|
|
29
37
|
```
|
|
30
38
|
|
|
31
39
|
## What's in here
|
|
32
40
|
|
|
33
|
-
- **`Code
|
|
34
|
-
`
|
|
41
|
+
- **`Code`**, a hugging block of highlighted source, written with
|
|
42
|
+
`component2d`: call it (`Code({ ... })`) or construct it (`new Code({ ... })`).
|
|
43
|
+
Set `code`, `language` and `theme` to choose what is shown; tune `fontSize`,
|
|
35
44
|
`fontFamily`, `lineHeight`, `letterSpacing`, `showLineNumbers`,
|
|
36
|
-
`lineNumberGap
|
|
37
|
-
- **Token-level
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
- **
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
- **`initSyntaxHighlighter(themes, langs)`**, optional preloading of Shiki
|
|
52
|
-
themes and languages so the first frame renders fully highlighted.
|
|
45
|
+
`lineNumberGap` and `padding` for layout.
|
|
46
|
+
- **Token-level commands**: `append`/`prepend` (lines at the end or start),
|
|
47
|
+
`insert` (at a `[line, col]` position), `remove`, `replace`,
|
|
48
|
+
`highlight`/`resetHighlight` (dim everything outside a range, then restore
|
|
49
|
+
it), and `highlightRows`/`resetRowHighlight` (a coloured band behind whole
|
|
50
|
+
lines, which slides onto the next rows it is given and follows its lines
|
|
51
|
+
through an edit). A `to` command on `code` diffs the whole listing the same way;
|
|
52
|
+
while it runs, `code` holds a `CodeBlend` (`{ from, to, t }`) rather than a
|
|
53
|
+
string, and a source again at either end.
|
|
54
|
+
- **Range helpers**: `word(line, col, length)`, `lines(from, to)` and the
|
|
55
|
+
chainable `CodeRanges` build the ranges those commands take.
|
|
56
|
+
- **Themes**: `github-dark`, `github-light`, `vscode-dark`, `vscode-light`
|
|
57
|
+
and a default, plus `registerCodeTheme` for your own.
|
|
58
|
+
`initSyntaxHighlighter(themes, langs)` preloads grammars so the first frame
|
|
59
|
+
renders fully highlighted.
|
|
53
60
|
|
|
54
61
|
Every token keeps a stable identity across edits, so concurrent animations at
|
|
55
62
|
different positions do not clobber each other while one is mid-flight.
|
|
56
63
|
|
|
57
|
-
This package
|
|
58
|
-
|
|
59
|
-
[`@motionscript/browser`](
|
|
64
|
+
This package is written against [`@motionscript/sdk`](https://github.com/motionscript-dev/motionscript/tree/main/packages/sdk), which it
|
|
65
|
+
takes as a peer dependency, and renders through whatever backend draws the
|
|
66
|
+
scene, such as [`@motionscript/browser`](https://github.com/motionscript-dev/motionscript/tree/main/packages/browser).
|
|
67
|
+
|
|
68
|
+
## Languages, themes and line endings
|
|
69
|
+
|
|
70
|
+
- **Languages**: `typescript` (`ts`), `tsx`, `javascript` (`js`), `jsx`, `python`
|
|
71
|
+
(`py`), `json`, `html`, `css`, `rust`, `go`, `java`, `cpp` (`c++`), `php`,
|
|
72
|
+
`markdown` (`md`), `xml` and `yaml` (`yml`). `shell` is an alias of
|
|
73
|
+
`javascript`, because no shell grammar is bundled. Names are case-insensitive.
|
|
74
|
+
- **An unknown language, a grammar whose import is rejected and an unknown theme
|
|
75
|
+
name** each fall back (plain text, plain text and the default theme) and log one
|
|
76
|
+
`[Code]` warning per name for the life of the process. `''`, `text` and
|
|
77
|
+
`plaintext` mean plain text on purpose and say nothing.
|
|
78
|
+
- **`language` and `theme` can be tweened or bound.** The listing is re-coloured
|
|
79
|
+
from the props on the next frame, keeping the token identities a highlight
|
|
80
|
+
already names.
|
|
81
|
+
- **`\r\n` and a lone `\r` are line breaks**, in `code` and in the text a command
|
|
82
|
+
brings in; the node's `code` reads back with `\n` after its first command.
|
|
83
|
+
- **Edits are diffed within a budget.** Lines are paired by the same text at the
|
|
84
|
+
ends of the listing and by lines that occur once on both sides, so an edit
|
|
85
|
+
to a long listing costs in proportion to what changed. Only a run of changed
|
|
86
|
+
lines between two such anchors is compared pairwise, up to
|
|
87
|
+
`LINE_ALIGN_CELLS` (40,000) line pairs per run and 160,000 per edit; beyond
|
|
88
|
+
that its lines leave and enter as whole rows instead of morphing into each
|
|
89
|
+
other.
|
|
90
|
+
- **A command on a node that is not in a tree** runs its duration and writes
|
|
91
|
+
nothing. A document cannot reach this, because the validator rejects a command
|
|
92
|
+
that starts before its target is present.
|
|
93
|
+
|
|
94
|
+
## Ranges, queries and what a copy holds
|
|
95
|
+
|
|
96
|
+
- **Ranges are 1-indexed** in lines and columns. `endLine`/`endCol` may be
|
|
97
|
+
`Infinity` (to the end of the line or document); a range that went through
|
|
98
|
+
JSON holds `null` there and reads the same. Positions clamp, so no command
|
|
99
|
+
throws for a bad range, and a `CodeRanges` chain serialises as its array of
|
|
100
|
+
ranges.
|
|
101
|
+
- **`findAllRanges(source, text)`, `findRangeAt(source, text, index)` and
|
|
102
|
+
`findFirstRange(source, text)`** return the literal matches in a source as
|
|
103
|
+
ranges: pass a listing's `code`. `listingOf(node)` is what a listing shows now:
|
|
104
|
+
its source, its token rows and the edit in flight.
|
|
105
|
+
- **`remove` is the command's key, and a node has no method of that name for it**:
|
|
106
|
+
`Node.remove` already takes a child out of the tree, so the command is
|
|
107
|
+
dispatched by key (a document, a host's registry) and reaches the node's
|
|
108
|
+
`_command_remove`.
|
|
109
|
+
- **A `Code` takes no children and has no `fill`, `stroke` or `shadow`**; a panel
|
|
110
|
+
behind it is a parent `Rect`. It also refuses the ambient text style
|
|
111
|
+
(`<DefaultTextStyle>`): its columns are measured against its own face, so an
|
|
112
|
+
inherited family or weight would shape glyphs the geometry never measured.
|
|
113
|
+
- **`diffStrategy` and `phaseStrategy`** (`CodeStrategies`) replace how an edit is
|
|
114
|
+
paired and how its out/move/in windows are timed. They are arguments of
|
|
115
|
+
`defineCode({ diffStrategy, phaseStrategy })`, which returns a `code` component
|
|
116
|
+
using them: hand that to the engine in place of `Code`. A strategy is a
|
|
117
|
+
function, which a prop would read as a binding, so a document cannot set one.
|
|
118
|
+
- **Each listing command writes the listing it acted on**, so the token ids a
|
|
119
|
+
highlight or a band captured are the ones drawn. Two commands of one kind
|
|
120
|
+
that overlap (two edits, two highlights) hand over from the later one's first
|
|
121
|
+
frame: the later command's state replaces the earlier's while both run.
|
|
122
|
+
- **A `Code` is drawn from what its last measure laid out**, which its parent
|
|
123
|
+
asks for before every frame; one that was never measured draws nothing.
|
|
124
|
+
- **Highlighter state is per process.** Loaded grammars, registered themes and
|
|
125
|
+
token ids are shared by every `Code` in it.
|
|
126
|
+
- **A copy of `code` takes only `node.ts`** (`registry.json`). The highlighter,
|
|
127
|
+
diff, layout and drawing stay in this package behind `src/engine.ts`, which the
|
|
128
|
+
copy imports from `@motionscript/code`; the grammars are dynamic imports, so a
|
|
129
|
+
host's bundler must resolve `@lezer/*` from where the package is installed.
|
|
130
|
+
|
|
131
|
+
## The monospaced face is yours to supply
|
|
132
|
+
|
|
133
|
+
`Code` measures and draws every token in its `fontFamily`, `Fira Mono` by
|
|
134
|
+
default, and lines its columns up on that face's advances. The package ships no
|
|
135
|
+
font file and names no URL: list a monospaced face under that family in the
|
|
136
|
+
engine's asset manifest, alongside the node itself.
|
|
137
|
+
|
|
138
|
+
```ts
|
|
139
|
+
const engine = await createBrowserEngine({
|
|
140
|
+
wasmUrl,
|
|
141
|
+
nodes: [Code],
|
|
142
|
+
manifest: {
|
|
143
|
+
image: {}, video: {}, audio: {},
|
|
144
|
+
font: {
|
|
145
|
+
'Fira Mono@400': {
|
|
146
|
+
fontFamily: 'Fira Mono', fontWeight: 400,
|
|
147
|
+
src: '/fonts/FiraMono-Regular.ttf', sizeBytes: 0,
|
|
148
|
+
},
|
|
149
|
+
},
|
|
150
|
+
},
|
|
151
|
+
});
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
A family the manifest does not list is never loaded. The loader warns once, and
|
|
155
|
+
the listing draws no text, or shapes in whichever other face is registered. To
|
|
156
|
+
use another face, set `fontFamily` on the node and list that family instead.
|
|
60
157
|
|
|
61
158
|
## Usage
|
|
62
159
|
|
|
63
160
|
```bash
|
|
64
|
-
npm install @motionscript/code
|
|
161
|
+
npm install @motionscript/code @motionscript/sdk
|
|
65
162
|
```
|
|
66
163
|
|
|
67
|
-
See the
|
|
164
|
+
See the
|
|
165
|
+
[docs](https://motionscript.dev/docs) for the full feature set and API
|
|
68
166
|
reference.
|
|
69
167
|
|
|
70
168
|
## Development
|