HCDR

This is a web-based component-based development tool based on Node.js server-side.

install

npm install hcdr

define

// Hcdr.js
const { html, css, define } = require("hcdr")

// HTML document
const template = ({ title }) => {
  return html`
    <div class="content">
      <h1>${title}</h1>
      <p>Welcome to ${title}</p>
    </div>
  `
}

// CSS style
const style = ({ color }) => {
  return css`
    .content {
      color: ${color};
    }
  `
}

// JavaScript
const script = () => {
  console.log("Running on the browser.")
}

// Register Component "Hcdr"
module.exports = define("Hcdr", { template, style, script })

use

// express Example
// app.js

const express = require("express")
const app = express()

// Import render and component
const { render } = require("hcdr")
const Hcdr = require("./views/Hcdr")

app.get("/", async (req, res) => {
  // use Hcdr
  const html = await render(
    Hcdr,
    { title: "HCDR" },
    { color: "red" },
    { title: "Home" }
  )

  res.send(html)
})

app.listen(3000, () => {
  console.log(`Server listening at http://localhost:3000`)
})

Running

Running in the browser: http://localhost:3000

Viewing developer tools, it shows:

Running on the browser.

license

ISC