Scrap 🚀

A frontend programming language dialect that works with normal Javascript, but replaces CSS with ScrapStyle (using = instead of :) and HTML with SHml (providing simplified div structures and closing tags).

This project includes the core Scrap compiler, a Node.js CLI tool, and a high-fidelity web playground for real-time writing, executing, and inspection of Scrap applications.

Language Specifications

1. SHml (Scrap HTML)

SHml makes HTML layout cleaner, faster, and more natural, particularly when using div elements.

• Default Tag Name (div): If you write a tag without a tag name (only attributes or shorthands), the compiler defaults it to div.
  • <class="card">...</> compiles to <div class="card">...</div>.
• Emmett-style Shorthands: You can define classes and IDs using CSS-like shorthand selectors directly within the tag brackets.
  • <.card.p-4> compiles to <div class="card p-4"></div>.
  • <#header.fixed> compiles to <div id="header" class="fixed"></div>.
• Merge Attributes: Shorthands merge automatically with explicit attributes:
  • <.card.p-4 class="active" id="my-card"> compiles to <div class="active card p-4" id="my-card"></div>.
• Closing Shorthand (</>): Close the closest opened tag automatically using </> instead of writing full closing tags.
  • <button>Click Me</> compiles to <button>Click Me</button>.
• Void Tags Support: Self-closing void tags (<img>, <br>, <input>) are fully supported and will not mess up the closing tag stack.

Advanced Reactive & Scoped Features ⚡ (Unique to Scrap)

Standard HTML/CSS has no concept of reactivity or scoped styling without complex frameworks (like React or Vue) and build chains. Scrap integrates these features directly into the dialect:

1. Scoped CSS Component Styling

All styles written inside <style> (or <style scoped>) are automatically encapsulated inside their component file.

• Compiler Scope Token: The compiler automatically generates a unique ID (e.g. data-s-abcde) and appends it to all tags inside the template and selectors inside your stylesheet.
• Selectors Rewrite:

  .btn:hover { background-color = blue; }

  compiles to:

  .btn[data-s-abcde]:hover { background-color: blue; }

  This prevents styles from leaking and colliding with other pages/components.
• Global Styling: To write global styles, use <style global>.

2. Curly Brace Text Bindings

Text nodes containing {state.propertyName} are reactive.

• Shorthand: <h1>Count: {state.count}</h1>
• Result: Compiles to a reactive span node. When you mutate state.count, the heading value updates in real-time.

3. Event Directives (@event)

Listen to events inline without writing verbose addEventListener selectors in your script.

• Shorthand: <button @click="state.count++">Increment</>
• Result: Translates to clean inline listeners wired up to the reactive Proxy state. Supports @click, @input, @change, @submit, and all standard browser events.

4. Conditional Rendering (if)

Conditionally render template sections based on boolean evaluations.

• Shorthand:

  <button if="!state.following" @click="state.following = true">Follow</>
  <button if="state.following" @click="state.following = false">Following</>

• Result: Nodes are dynamically shown or hidden when state.following changes state.

File Structure

Scrap.js/
├── dist/             # Compiled standalone executable binaries
│   ├── scrap.exe     # Windows executable
│   ├── scrap-linux   # Linux binary
│   └── scrap-macos   # macOS binary
├── scrap.js          # Core compiler engine (transpiles SHml & ScrapStyle to HTML/CSS)
├── cli.js            # Node.js command-line interface
├── index.html        # Interactive playground skeleton
├── styles.css        # Vibrant dark-mode UI styling
├── playground.js     # Code editor interactions & sandbox logs
├── example.scrap     # Demonstration file containing a full app
└── README.md         # Language & project documentation

How to Use

1. Interactive Web Playground

The playground is fully client-side and requires no setup.

1. Open the index.html file directly in your web browser.
2. Select a preset (Interactive Counter, Task Manager, Profile Card, Aroma Coffee Shop) to see examples.
3. Edit the Scrap code in the left panel. The compilation will run in real-time, displaying compiled HTML/CSS/JS outputs and live interactive rendering in the iframe sandbox.
4. Open the virtual Console tab in the playground to view console.log and console.error logs running in the iframe.

2. CLI Tool (Global Installation)

You can install the compiler globally to make the scrap command available everywhere in your terminal:

Installation: Run npm link inside the Scrap.js package folder:

npm link

Usage: Running the compile command on a .sjs (or .scrap) file starts a local development HTTP server and launches a watcher to automatically recompile your project on file saves:

scrap <input.sjs> [output.html] [--port <number>]

• Port selection: Defaults to port 3000 (e.g. http://localhost:3000). Customize this by passing --port <port_number>.
• Watcher: The CLI actively monitors the input .sjs file, compiling it dynamically on every file save.

Example: To launch the compiler and live development server for the pre-built app.sjs file:

scrap app.sjs

This prints the server URL (e.g. http://localhost:3000) in the terminal. Open it in your web browser, make edits to app.sjs, save them, and refresh your browser page to see changes in real-time!