Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Rich-Harris/code-red
Experimental toolkit for writing x-to-JavaScript compilers
https://github.com/Rich-Harris/code-red
Last synced: about 2 months ago
JSON representation
Experimental toolkit for writing x-to-JavaScript compilers
- Host: GitHub
- URL: https://github.com/Rich-Harris/code-red
- Owner: Rich-Harris
- License: mit
- Created: 2019-09-08T16:11:29.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-10T18:41:30.000Z (about 1 year ago)
- Last Synced: 2024-05-22T02:02:56.582Z (4 months ago)
- Language: JavaScript
- Size: 293 KB
- Stars: 331
- Watchers: 6
- Forks: 22
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome - Rich-Harris/code-red - Experimental toolkit for writing x-to-JavaScript compilers (JavaScript)
README
# code-red
Experimental toolkit for writing x-to-JavaScript compilers. It is used in [Svelte](https://svelte.dev).
## API
The `code-red` package exposes three core functions — `b`, `x` and `print`.
`b` and `x` take a template literal and return an [ESTree](https://github.com/estree/estree) program body, or a single node:
```js
import { b, x } from 'code-red';
const expression = x`i + j`;
assert.equal(expression.type, 'AssignmentExpression');
assert.equal(expression.operator, '+');
assert.equal(expression.left.name, 'i');
assert.equal(expression.right.name, 'j');
const body = b`
const i = 1;
const j = 2;
const k = i + j;
`;
assert.equal(body.length, 3);
assert.equal(body[0].type, 'VariableDeclaration');
```
Expressions in template literals correspond to replacement nodes — so you could express the above like so:
```js
const i = x`i`;
const j = x`j`;
const expression = x`${i} + ${j}`;
const body = b`
const ${i} = 1;
const ${j} = 2;
const k = ${expression};
`;
```
The `print` function takes a node and turns it into a `{code, map}` object:
```js
const add = x`
function add(${i}, ${j}) {
return ${expression};
}
`;
print(add).code;
/*
function add(i, j) {
return i + j;
}
*/
i.name = 'foo';
j.name = 'bar';
print(add).code;
/*
function add(foo, bar) {
return foo + bar;
}
*/
```
## Prefixes
### `@`-prefixed names (replaceable globals)
So that you can use globals in your code. In Svelte, we use this to insert utility functions.
```js
// input
import { x } from 'code-red';
x`@foo(bar)`
// output
FOO(bar)
```
### `#`-prefixed names (automatically deconflicted names)
So that you can insert variables in your code without worrying if they clash with existing variable names.
`bar` used in user code and in inserted code gets a `$1` suffix:
```js
// input
import { x } from 'code-red';
x`
function foo(#bar) {
return #bar * bar;
}`;
// output
function foo(bar$1) {
return bar$1 * bar;
}
```
Without conflicts, no `$1` suffix:
```js
// input
import { b } from 'code-red';
b`const foo = #bar => #bar * 2`;
// output
const foo = bar => bar * 2;
```
## Optimiser
TODO add an optimiser that e.g. collapses consecutive identical if blocks
## Compiler
TODO add a `code-red/compiler` module that replaces template literals with the nodes they evaluate to, so that there's nothing to parse at runtime.
## Sourcemaps
TODO support source mappings for inserted nodes with location information.
## License
[MIT](LICENSE)