├── .gitignore
├── examples
├── components
│ ├── .gitignore
│ ├── package.json
│ ├── views
│ │ └── index.webc
│ ├── app.js
│ └── components
│ │ └── cool-button.webc
└── hello-world
│ ├── .gitignore
│ ├── package.json
│ ├── views
│ └── index.webc
│ └── app.js
├── package.json
├── index.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .DS_Store
--------------------------------------------------------------------------------
/examples/components/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | package-lock.json
--------------------------------------------------------------------------------
/examples/hello-world/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | package-lock.json
--------------------------------------------------------------------------------
/examples/components/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "name": "components",
4 | "version": "0.0.0",
5 | "main": "app.js",
6 | "dependencies": {
7 | "express-webc": "^0.0.1"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/examples/hello-world/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "name": "hello-world",
4 | "version": "0.0.0",
5 | "main": "app.js",
6 | "dependencies": {
7 | "express-webc": "^0.0.1"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/examples/hello-world/views/index.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Hello, World.
8 |
9 |
10 |
11 | Hello, World.
12 |
13 |
14 |
--------------------------------------------------------------------------------
/examples/components/views/index.webc:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Components
8 |
9 |
10 |
11 | Components
12 | Submit
13 |
14 |
15 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "express-webc",
3 | "version": "0.0.1",
4 | "description": "WebC Template Engine for ExpressJS",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "license": "MIT",
10 | "dependencies": {
11 | "@11ty/webc": "^0.4.5"
12 | },
13 | "devDependencies": {
14 | "express": "^4.18.1"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/examples/components/app.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const { WebCEngine } = require("express-webc");
3 |
4 | const app = express();
5 | app.engine("webc", WebCEngine);
6 | app.set("view engine", "webc");
7 |
8 | app.get("/", async (request, response) => {
9 | response.render("index");
10 | });
11 |
12 | app.listen(8080, () => {
13 | console.log("Application running at http://localhost:8080");
14 | });
15 |
--------------------------------------------------------------------------------
/examples/hello-world/app.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const { WebCEngine } = require("express-webc");
3 |
4 | const app = express();
5 | app.engine("webc", WebCEngine);
6 | app.set("view engine", "webc");
7 |
8 | app.get("/", async (request, response) => {
9 | response.render("index");
10 | });
11 |
12 | app.listen(8080, () => {
13 | console.log("Application running at http://localhost:8080");
14 | });
15 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const path = require("node:path");
2 |
3 | const DEFAULT_COMPONENT_DIRECTORY = "components";
4 |
5 | const WebCEngine = async (filePath, options, callback) => {
6 | try {
7 | const { WebC } = await import("@11ty/webc");
8 | let page = new WebC();
9 | const {
10 | views,
11 | ["webc:components"]: components = DEFAULT_COMPONENT_DIRECTORY,
12 | } = options.settings;
13 |
14 | page.defineComponents(path.join(views, "..", components, "**.webc"));
15 |
16 | page.setInputPath(filePath);
17 |
18 | let { html } = await page.compile();
19 |
20 | callback(null, html);
21 | } catch (error) {
22 | callback(error);
23 | }
24 | };
25 |
26 | const __express = WebCEngine;
27 |
28 | module.exports = {
29 | WebCEngine,
30 | __express,
31 | };
32 |
--------------------------------------------------------------------------------
/examples/components/components/cool-button.webc:
--------------------------------------------------------------------------------
1 |
27 |
30 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Express WebC
2 |
3 | Not implemented yet: Access to webc bundles.
4 |
5 | ## Getting started
6 |
7 | ### 1. Install the package
8 |
9 | ```bash
10 | npm install express express-webc
11 | ```
12 |
13 | ### 2. Create your application and define webc as your view engine
14 |
15 | ```javascript
16 | // app.js
17 | const express = require("express");
18 | const { WebCEngine } = require("express-webc");
19 |
20 | const app = express();
21 | app.engine("webc", WebCEngine);
22 | app.set("view engine", "webc");
23 |
24 | app.get("/", async (request, response) => {
25 | response.render("index");
26 | });
27 |
28 | app.listen(8080, () => {
29 | console.log("Application running at http://localhost:8080");
30 | });
31 | ```
32 |
33 | ### 3. Create your initial view
34 |
35 | ```html
36 |
37 |
38 |
39 |
40 |
41 |
42 | Hello, World.
43 |
44 |
45 | Hello, World.
46 | I'm a pretty cool button
47 |
48 |
49 | ```
50 |
51 | ### 4. Create a component
52 | ```html
53 |
54 |
80 |
83 | ```
84 |
85 | ### 5. Run your application
86 | ```bash
87 | node app.js
88 | ```
89 |
90 | See [examples/ directory for full examples](examples/).
91 |
92 | ## Configuring components
93 |
94 | Default components directory is the "components" directory
95 |
96 | ```javascript
97 | app.set("webc:components", "directory-for-my-components");
98 | ```
--------------------------------------------------------------------------------