https://github.com/ngasull/classic-js

Generate type-checked JS
https://github.com/ngasull/classic-js

Last synced: about 2 months ago
JSON representation

Generate type-checked JS

• Host: GitHub
• URL: https://github.com/ngasull/classic-js
• Owner: ngasull
• Created: 2024-06-28T16:55:06.000Z (6 months ago)
• Default Branch: master
• Last Pushed: 2024-07-15T18:48:26.000Z (6 months ago)
• Last Synced: 2024-07-15T23:02:43.397Z (6 months ago)
• Language: TypeScript
• Size: 122 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @classic/js - Page specific JS from any backend

[![JSR](https://jsr.io/badges/@classic/js)](https://jsr.io/@classic/js)

Custom elements/web components scope reusable logic and style.

On the other hand, @classic/js offers a way to send dynamic arbitrary code in web pages to fully control native and custom elements.

```ts

const foo = "42";

const jsParsedFoo = js`parseInt(${foo})`; // Smart interpolation will result in `parseInt("42")`

await js.eval(jsParsedFoo) === 42;

```

References are tracked and transcribed into generated JS, so it is minified by design:

```ts

const lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

const loremReference = js`${lorem}`;

await js.eval(js`${lorem} === ${loremReference}`) === true;

// ^ `lorem` is referenced twice: generated JS will declare it as a variable

```