πŸŒ… Overview of Risescript

Risescript is a high-level scripting language that combines server-side and client-side capabilities in a unified syntax. It is designed for full-stack web development, removing context-switching between HTML, CSS, JavaScript, and PHP.

🧩 Core Concepts of Risescript

1. Unified Syntax Layer

Risescript introduces a unified syntax that handles:

  • HTML templates

  • CSS styling

  • JS interactivity

  • PHP-style backend logic in a modular and consistent block structure.

2. Modules & Components

The language is component-driven and supports reusable UI logic and backend code using the .rise file extension. Each .rise file can contain:

risescript
<component name="NavBar">
    <style scoped>
        nav {
            background: #222;
            color: white;
        }
    </style>

    <script>
        function toggleMenu() {
            document.querySelector("nav").classList.toggle("open");
        }
    </script>

    <template>
        <nav onclick="toggleMenu()">
            <slot name="logo" />
            <slot name="menu" />
        </nav>
    </template>

    <backend>
        $user = getCurrentUser();
    </backend>
</component>

πŸ“¦ File Structure Best Practices

1. Component-Based Architecture

Use .rise files grouped by feature:

bash
/components
    NavBar.rise
    Footer.rise
/pages
    Home.rise
    About.rise
/layouts
    MainLayout.rise
/assets
    style.rise.css
    script.rise.js

2. Logic Separation & Slot Injection

Encourages encapsulation using:

  • <template> for HTML

  • <style scoped> for CSS

  • <script> for client JS

  • <backend> for PHP

Slots enable flexible templating (like in Web Components or Vue).

βš™οΈ Syntax Features

βœ… PHP-Like Backend Logic

risescript
<backend>
    if ($user->isAdmin()) {
        echo "<p>Welcome, admin!</p>";
    }
</backend>

βœ… JavaScript Enhancements

Supports native JS inside <script> blocks:

risescript
<script>
    const greet = (name) => {
        alert(`Hello, ${name}`);
    };
</script>

βœ… Scoped CSS

risescript
<style scoped>
    .button {
        background: var(--primary);
        border-radius: 6px;
    }
</style>

βœ… Reactive Variables

risescript
<template>
    <input bind:value="userName" />
    <p>Hello, {{ userName }}</p>
</template>

<script>
    let userName = "Guest";
</script>

🧱 Modular System

Importing Components

risescript
<import src="/components/NavBar.rise" as="NavBar" />

<template>
    <NavBar>
        <div slot="logo">MySite</div>
        <ul slot="menu">
            <li>Home</li>
            <li>About</li>
        </ul>
    </NavBar>
</template>

πŸš€ Compilation and Output

Risescript compiles to:

  • HTML for <template>

  • CSS for <style>

  • JS for <script>

  • PHP for <backend>

With a CLI:

bash
risescript build
risescript serve
risescript export --target=php

πŸ” Security & Scalability

- Built-in XSS protection

- CSRF tokens injected automatically in forms

- Lazy component loading

- Server-side rendering support

πŸ“˜ Summary

FeatureRisescript Support
HTMLβœ… in <template>
CSSβœ… in <style>
JSβœ… in <script>
PHPβœ… in <backend>
Modularityβœ… <component> and <import>
Scalabilityβœ… Slot-based composition, CLI tools

Here’s a complete breakdown of Risescript, including its documentation, compiler outline, and a sample project.

Risescript Documentation

1. File Structure

Risescript files use the .rise extension. Each file may contain the following top-level tags:

2. Component Declaration

r
<component name="Button">
    <style scoped>
        button {
            background: #007bff;
            color: white;
            padding: 0.5rem 1rem;
        }
    </style>

    <script>
        function handleClick() {
            alert("Clicked!");
        }
    </script>

    <template>
        <button onclick="handleClick()"><slot /></button>
    </template>
</component>

3. Slots and Props

risescript
<component name="Card">
    <template>
        <div class="card">
            <h2><slot name="title" /></h2>
            <p><slot name="body" /></p>
        </div>
    </template>
</component>

4. Backend Logic

risescript
<backend>
    $user = getCurrentUser();
    if ($user->isAdmin()) {
        echo "<p>Welcome back, admin!</p>";
    }
</backend>

5. Imports

r
<import src="/components/Button.rise" as="Button" />

6. Reactivity (planned for V2)

r
<script>
    let counter = 0;
    function increment() {
        counter++;
    }
</script>

<template>
    <button onclick="increment()">Click me</button>
    <p>You clicked {{ counter }} times.</p>
</template>

Risescript Compiler Outline

Compiler Pipeline

mermaid
graph TD
A[Input .rise file] --> B[Parse into AST]
B --> C[Separate Sections: HTML, CSS, JS, PHP]
C --> D[Transform & Optimize]
D --> E[Generate Output Files]
E --> F[Bundle & Serve / Export]

1. Lexical Analysis

2. Parsing to AST

3. Transformation

4. Output Generation

For each .rise file:

5. CLI Tools

bash
risescript build             # Compile to /dist
risescript serve             # Local dev server
risescript export --target=php  # Export backend files
risescript lint              # Lint Risescript code

Sample Project

Directory Structure

arduino
/sample-project
β”œβ”€β”€ components
β”‚   └── Button.rise
β”œβ”€β”€ pages
β”‚   └── Home.rise
β”œβ”€β”€ layouts
β”‚   └── MainLayout.rise
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ index.html
β”‚   └── style.css
β”œβ”€β”€ risescript.config.js
└── dist/ (output)

Button.rise

risescript
<component name="Button">
    <style scoped>
        button {
            background: #28a745;
            border: none;
            padding: 10px 20px;
            color: white;
            cursor: pointer;
        }
    </style>

    <script>
        function sayHello() {
            alert("Hello from Risescript!");
        }
    </script>

    <template>
        <button onclick="sayHello()"><slot /></button>
    </template>
</component>

Home.rise

risescript
<import src="/components/Button.rise" as="Button" />

<template>
    <h1>Welcome to Risescript!</h1>
    <Button>Click Me</Button>
</template>

<backend>
    echo "<p>This is rendered on the server at " . date("Y-m-d H:i:s") . "</p>";
</backend>

MainLayout.rise

risescript
<template>
    <html>
    <head>
        <title>My Risescript App</title>
    </head>
    <body>
        <main>
            <slot />
        </main>
    </body>
    </html>
</template>

risescript.config.js

js
module.exports = {
    entry: './pages/Home.rise',
    output: './dist',
    devServer: {
        port: 3000,
        open: true
    }
};

βœ… Next Steps

Would you like me to:

Let me know how you'd like to proceed!

Risescript Compiler Prototype
// risescript-compiler.js
const fs = require('fs');
const path = require('path');

function parseRiseFile(filePath) {
const content = fs.readFileSync(filePath, 'utf-8');

const extract = (tag) => {
const match = content.match(new RegExp(`<${tag}[^>]*>([\s\S]*?)<\/${tag}>`, 'i'));
return match ? match[1].trim() : '';
};

return {
template: extract('template'),
style: extract('style'),
script: extract('script'),
backend: extract('backend'),
};
}

function compileRiseFile(filePath, outputDir) {
const name = path.basename(filePath, '.rise');
const parsed = parseRiseFile(filePath);

if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);

fs.writeFileSync(path.join(outputDir, `${name}.html`), parsed.template);
fs.writeFileSync(path.join(outputDir, `${name}.css`), parsed.style);
fs.writeFileSync(path.join(outputDir, `${name}.js`), parsed.script);
fs.writeFileSync(path.join(outputDir, `${name}.php`), `<?php\n${parsed.backend}\n?>`);

console.log(`Compiled ${name} to ${outputDir}`);
}

// CLI interface
const args = process.argv.slice(2);
if (args.length < 2) {
console.error('Usage: node risescript-compiler.js <inputFile.rise> <outputDir>');
process.exit(1);
}

const [inputFile, outputDir] = args;
compileRiseFile(inputFile, outputDir);

βœ… Compiler Prototype

I've created a basic Risescript compiler prototype (risescript-compiler.js) that:

  • Parses a .rise file

  • Extracts <template>, <style>, <script>, and <backend>

  • Outputs corresponding .html, .css, .js, and .php files into a chosen directory

You can run it like this:

bash
node risescript-compiler.js components/Button.rise dist/

πŸ“˜ GitHub-Style README & Install Guide

markdown
# πŸŒ… Risescript

Risescript is a modular full-stack web language that integrates **PHP**, **HTML**, **CSS**, and **JavaScript** into a single expressive format.

## πŸ“¦ Project Structure

project/ β”œβ”€β”€ components/ β”‚ └── Button.rise β”œβ”€β”€ dist/ β”‚ β”œβ”€β”€ Button.html β”‚ β”œβ”€β”€ Button.css β”‚ β”œβ”€β”€ Button.js β”‚ └── Button.php └── risescript-compiler.js

bash

## πŸš€ Get Started

### 1. Clone the repo
```bash
git clone https://github.com/yourusername/risescript.git
cd risescript

2. Install Node.js (if not already)

https://nodejs.org

3. Run the Compiler

bash
node risescript-compiler.js path/to/file.rise path/to/output/

πŸ“˜ Example .rise File

risescript
<component name=\"Button\">
  <template>
    <button onclick=\"alert('Hi')\">Click Me</button>
  </template>
  <style scoped>
    button { background: green; color: white; }
  </style>
  <script>
    // JS Logic here
  </script>
  <backend>
    echo \"<?php echo 'Rendered at: ' . date('Y-m-d'); ?>\";
  </backend>
</component>

πŸ“„ License

MIT

yaml

---

### πŸ§ͺ Live REPL / Demo Environment (Proposed)

For a live REPL, we can use:
- A browser-based editor like [Monaco Editor](https://microsoft.github.io/monaco-editor/)
- Use CodeMirror + a sandboxed iframe
- Backend: Express.js server that runs the compiler and returns compiled files

Would you like me to start building the live REPL as a local dev environment or deployable web app (e.g. via Vercel/Render)? Let me know and I’ll get started!