docs: demo for using LiquidJS with webpack

2026-09-15 04:10:40 -07:00 · 2022-10-22 00:39:18 +08:00
parent 32f613fb43
commit 33c7c8f301
10 changed files with 90 additions and 2 deletions
@@ -1,4 +1,4 @@
-# LiquidJS for Node.js
+# Using LiquidJS in ESM

 ## Get Started

@@ -1,4 +1,4 @@
-# LiquidJS for Express.js
+# Using LiquidJS with Express.js

 ## Get Started

@@ -0,0 +1,10 @@
+# Using LiquidJS with Webpack
+
+## Get Started
+
+```bash
+cd demo/nodejs
+npm install
+npm run build
+npm start
+```
@@ -0,0 +1,7 @@
+<html>
+  <head><meta name="title" content="{{title}}"></head>
+  <body>
+    {% block %}{% endblock %}
+    {% render "footer.liquid" %}
+  </body>
+</html>
@@ -0,0 +1,18 @@
+{
+  "name": "liquidjs-demo-nodejs",
+  "description": "Node.js demo for liquidjs",
+  "private": true,
+  "main": "dist/index.js",
+  "scripts": {
+    "start": "node dist/index.js",
+    "build": "webpack"
+  },
+  "dependencies": {
+    "hello-liquid": "^1.0.0",
+    "liquidjs": "^9.28.3"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
+  }
+}
@@ -0,0 +1 @@
+<small>{{title}}</small>
@@ -0,0 +1 @@
+<li>{{index}} - {{todo}}</li>
@@ -0,0 +1,30 @@
+import { Liquid } from 'liquidjs'
+
+const engine = new Liquid({
+  extname: '.liquid',
+  globals: { title: 'LiquidJS Demo' },
+  // root files for `.render()` and `.parse()`
+  root: process.cwd(),
+  // layout files for `{% layout %}`
+  layouts: process.cwd() + '/layouts',
+  // partial files for `{% include %}` and `{% render %}`
+  partials: process.cwd() + '/partials'
+})
+
+const ctx = {
+  todos: ['fork and clone', 'make it better', 'make a pull request']
+}
+
+async function main () {
+  console.log('==========renderFile===========')
+  const html = await engine.renderFile('todolist', ctx)
+  console.log(html)
+
+  console.log('===========Streamed===========')
+  const tpls = await engine.parseFile('todolist')
+  engine.renderToNodeStream(tpls, ctx)
+    .on('data', data => process.stdout.write(data))
+    .on('end', () => console.log(''))
+}
+
+main()
@@ -0,0 +1,6 @@
+{% layout 'html.liquid' %}
+<ul>
+  {% for todo in todos %}
+    {% render 'todo.liquid' with todo, index: forloop.index%}
+  {% endfor %}
+</ul>
@@ -0,0 +1,15 @@
+const path = require('path');
+const { ContextReplacementPlugin } = require('webpack')
+
+module.exports = {
+  entry: './src/index.js',
+  mode: 'development',
+  target: 'node',
+  plugins: [
+    new ContextReplacementPlugin(/liquidjs/)
+  ],
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+};