create-microact-app 1.0.1

package/templates/vanilla/src/components/Hero.js

@@ -0,0 +1,15 @@
+import { Component } from '@monygroupcorp/microact';
+
+class Hero extends Component {
+  render() {
+    return `
+      <section class="hero">
+        <h1>Microact</h1>
+        <p>A lean, minimal React-like framework for client-side applications.</p>
+        <a href="https://github.com/Monygroup/microact" class="button">Learn More</a>
+      </section>
+    `;
+  }
+}
+
+export default Hero;

package/templates/vanilla/src/components/InteractiveDemo.js

@@ -0,0 +1,59 @@
+import { Component } from '@monygroupcorp/microact';
+
+class InteractiveDemo extends Component {
+  constructor() {
+    super();
+    this.state = {
+      count: 0,
+      isHighlighted: false,
+    };
+  }
+
+  events() {
+    return {
+      'click .demo__increment': 'handleIncrement',
+      'click .demo__reset': () => this.resetCount(),
+      'click .demo__toggle': (event) => {
+        event.preventDefault();
+        this.toggleHighlight();
+      },
+    };
+  }
+
+  handleIncrement() {
+    this.setState({ count: this.state.count + 1 });
+  }
+
+  resetCount() {
+    this.setState({ count: 0, isHighlighted: false });
+  }
+
+  toggleHighlight() {
+    this.setState({ isHighlighted: !this.state.isHighlighted });
+  }
+
+  render() {
+    const { count, isHighlighted } = this.state;
+
+    return `
+      <section class="interactive-demo ${isHighlighted ? 'interactive-demo--active' : ''}">
+        <div class="demo__copy">
+          <p>This widget exercises Microact's event system using both method references and inline functions.</p>
+          <p>Try clicking the buttons to update state and see the DOM update without a full re-render.</p>
+        </div>
+        <div class="demo__controls">
+          <p class="demo__count" aria-live="polite">
+            Button clicked <strong>${count}</strong> ${count === 1 ? 'time' : 'times'}
+          </p>
+          <div class="demo__buttons">
+            <button class="demo__increment">Increment</button>
+            <button class="demo__toggle">${isHighlighted ? 'Disable' : 'Enable'} Highlight</button>
+            <button class="demo__reset" type="reset">Reset</button>
+          </div>
+        </div>
+      </section>
+    `;
+  }
+}
+
+export default InteractiveDemo;

package/templates/vanilla/src/main.js

@@ -0,0 +1,9 @@
+import './style/main.css';
+import App from './components/App.js';
+
+const appRoot = document.getElementById('app');
+const app = new App(appRoot);
+app.mount(appRoot);
+
+
+

package/templates/vanilla/src/style/main.css

@@ -0,0 +1,172 @@
+:root {
+  --background-color: #ffffff;
+  --text-color: #212529;
+  --primary-font: 'Helvetica Neue', Arial, sans-serif;
+  --secondary-font: 'Georgia', serif;
+}
+
+body {
+  font-family: var(--primary-font);
+  background-color: var(--background-color);
+  color: var(--text-color);
+  margin: 0;
+  padding: 0;
+  line-height: 1.6;
+}
+
+.app-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.main-content {
+  flex: 1;
+  padding: 4rem 2rem;
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+.hero {
+  text-align: center;
+  padding: 4rem 2rem;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.hero h1 {
+  font-size: 3.5rem;
+  font-weight: 300;
+  margin-bottom: 1rem;
+}
+
+.hero p {
+  font-size: 1.25rem;
+  color: #6c757d;
+  margin-bottom: 2rem;
+}
+
+.hero .button {
+  background-color: #007bff;
+  color: #ffffff;
+  padding: 0.75rem 1.5rem;
+  text-decoration: none;
+  border-radius: 2rem;
+  font-weight: 500;
+  transition: background-color 0.2s;
+}
+
+.hero .button:hover {
+  background-color: #0056b3;
+}
+
+.card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 2rem;
+  margin-top: 4rem;
+}
+
+.card {
+  background-color: transparent;
+  border: 1px solid #dee2e6;
+  border-radius: 0.25rem;
+  padding: 2rem;
+  text-align: left;
+}
+
+.card h3 {
+  font-family: var(--secondary-font);
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.footer {
+  text-align: center;
+  padding: 2rem;
+  font-size: 0.9rem;
+  color: #6c757d;
+  border-top: 1px solid #dee2e6;
+  position: relative;
+}
+
+.footer p::before {
+  content: "©"; /* Standard copyright symbol */
+  display: inline-block;
+  transform: scaleX(-1); /* Flip horizontally */
+  margin-right: 0.25rem;
+}
+
+.interactive-section {
+  padding: 3rem 2rem 4rem;
+  border-top: 1px solid #dee2e6;
+  border-bottom: 1px solid #dee2e6;
+  background-color: #f8f9fa;
+}
+
+.interactive-section__copy {
+  max-width: 640px;
+  margin: 0 auto 2rem;
+  text-align: center;
+}
+
+.interactive-section__copy h2 {
+  margin-bottom: 0.5rem;
+}
+
+#interactive-demo {
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.interactive-demo {
+  border: 1px solid #dee2e6;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  background-color: #ffffff;
+  display: grid;
+  gap: 1.5rem;
+}
+
+.interactive-demo--active {
+  border-color: #007bff;
+  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
+}
+
+.demo__copy p {
+  margin: 0;
+}
+
+.demo__controls {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.demo__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.demo__buttons button {
+  border: none;
+  border-radius: 999px;
+  padding: 0.65rem 1.5rem;
+  background-color: #007bff;
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 0.95rem;
+  transition: background-color 0.2s ease;
+}
+
+.demo__buttons button:nth-child(2) {
+  background-color: #6610f2;
+}
+
+.demo__buttons button:nth-child(3) {
+  background-color: #343a40;
+}
+
+.demo__buttons button:hover {
+  opacity: 0.9;
+}

package/templates/vanilla/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ command }) => {
+  return {
+    base: command === 'build' ? '/<repo-name>/' : '/',
+  }
+})

package/templates/web3/.env.example

@@ -0,0 +1,15 @@
+# RPC that Anvil should fork from (optional)
+FORK_RPC_URL=https://eth.llamarpc.com
+
+# Local JSON-RPC endpoint exposed by Anvil
+RPC_URL=http://127.0.0.1:8545
+
+# Chain id to advertise to wallets
+CHAIN_ID=31337
+
+# Optional: override the default Anvil deployer key
+# DEPLOYER_PRIVATE_KEY=0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
+
+# Fund this address with fork ETH after deployment (set to your wallet address)
+# USER_ADDRESS=0xabc123...
+# USER_FUNDING_ETH=2.0

package/templates/web3/.github/workflows/deploy.yml

@@ -0,0 +1,38 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          # This is important for single-page applications that use client-side routing
+          # This ensures that all requests are routed to index.html
+          # enabling proper routing after refresh or direct URL access
+          keep_files: false # Ensure existing files are overwritten
+          force_orphan: true # Create a fresh gh-pages branch each time
+          enable_jekyll: false # Disable Jekyll processing

package/templates/web3/README.md

@@ -0,0 +1,33 @@
+# Micro Web3 + Anvil Starter
+
+This template wires Microact, Micro Web3, and a simple Foundry project so you can build dApps against a forked mainnet without leaving your laptop.
+
+## Prerequisites
+
+- [Foundry](https://book.getfoundry.sh/getting-started/installation) (`foundryup` + `anvil` + `forge`)
+- Node.js 18+
+- A browser wallet capable of connecting to a custom RPC (Rabby, MetaMask, etc.)
+
+## Workflow
+
+1. Copy `.env.example` to `.env.local` and set `USER_ADDRESS` to your wallet (optional but recommended).
+2. Run the setup helper once to install Foundry stdlib dependencies:
+   ```bash
+   npm run setup
+   ```
+3. Start the local chain, deploy Counter.sol, and fund your wallet. You can customize the port/RPC, or send Anvil to the background with `--background`:
+   ```bash
+   npm run chain:start
+   npm run chain:start -- --port 8550        # example overriding the RPC port
+   npm run chain:start -- --rpc-url http://127.0.0.1:9000
+   npm run chain:start -- --port 8551 --background
+   npm run chain:stop                        # cleanly shuts down the tracked Anvil instance
+   ```
+   This launches `anvil --fork-url $FORK_RPC_URL`, waits for the JSON-RPC endpoint, runs `forge build`, deploys `Counter.sol` via ethers, and funds `USER_ADDRESS` with fork ETH.
+4. In another terminal, run the front-end:
+   ```bash
+   npm run dev
+   ```
+5. Point your wallet at `http://127.0.0.1:8545` (Chain ID 31337), connect through the floating wallet button, and interact with the Counter component.
+
+Restart `npm run chain:start` any time you want a fresh fork. The deployment script always writes the current ABI/address to `src/generated/contract.json`, so Vite can import it during builds and deploys to static hosts like GitHub Pages.

package/templates/web3/contracts/foundry.toml

@@ -0,0 +1,11 @@
+[profile.default]
+src = 'src'
+out = 'out'
+libs = ['lib']
+cache_path = 'cache'
+bytecode_hash = 'none'
+
+[fmt]
+tab_width = 4
+max_line_length = 120
+multiline_func_header = 'params_first'

package/templates/web3/contracts/script/Deploy.s.sol

@@ -0,0 +1,13 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.23;
+
+import "forge-std/Script.sol";
+import { Counter } from "../src/Counter.sol";
+
+contract DeployCounter is Script {
+    function run() external {
+        vm.startBroadcast();
+        new Counter();
+        vm.stopBroadcast();
+    }
+}

package/templates/web3/contracts/src/Counter.sol

@@ -0,0 +1,21 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.23;
+
+/// @title Counter - simple contract for local testing
+contract Counter {
+    uint256 public value;
+
+    event Incremented(address indexed sender, uint256 newValue);
+    event Decremented(address indexed sender, uint256 newValue);
+
+    function increment() external {
+        value += 1;
+        emit Incremented(msg.sender, value);
+    }
+
+    function decrement() external {
+        require(value > 0, "Counter: cannot go below zero");
+        value -= 1;
+        emit Decremented(msg.sender, value);
+    }
+}

package/templates/web3/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Microact</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/web3/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "my-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "setup": "node scripts/setup.mjs",
+    "chain:start": "node scripts/chain-start.mjs",
+    "chain:deploy": "node scripts/deploy.mjs",
+    "chain:stop": "node scripts/chain-stop.mjs"
+  },
+  "dependencies": {
+    "@monygroupcorp/microact": "latest",
+    "@monygroupcorp/micro-web3": "0.1.3",
+    "ethers": "^5.7.2"
+  },
+  "devDependencies": {
+    "buffer": "^6.0.3",
+    "util": "^0.12.5",
+    "vite": "^4.4.5"
+  }
+}