docs: demo for using LiquidJS with webpack

harttle · harttle · commit 33c7c8f3015b · 2022-10-22T00:39:18.000+08:00
diff --git a/demo/esm/README.md b/demo/esm/README.md
@@ -1,4 +1,4 @@
-# LiquidJS for Node.js
+# Using LiquidJS in ESM
 
 ## Get Started
 
diff --git a/demo/express/README.md b/demo/express/README.md
@@ -1,4 +1,4 @@
-# LiquidJS for Express.js
+# Using LiquidJS with Express.js
 
 ## Get Started
 
diff --git a/demo/webpack/README.md b/demo/webpack/README.md
@@ -0,0 +1,10 @@
+# Using LiquidJS with Webpack
+
+## Get Started
+
+```bash
+cd demo/nodejs
+npm install
+npm run build
+npm start
+```
diff --git a/demo/webpack/layouts/html.liquid b/demo/webpack/layouts/html.liquid
@@ -0,0 +1,7 @@
+<html>
+  <head><meta name="title" content="{{title}}"></head>
+  <body>
+    {% block %}{% endblock %}
+    {% render "footer.liquid" %}
+  </body>
+</html>
diff --git a/demo/webpack/package.json b/demo/webpack/package.json
@@ -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"
+  }
+}
diff --git a/demo/webpack/partials/footer.liquid b/demo/webpack/partials/footer.liquid
@@ -0,0 +1 @@
+<small>{{title}}</small>
diff --git a/demo/webpack/partials/todo.liquid b/demo/webpack/partials/todo.liquid
@@ -0,0 +1 @@
+<li>{{index}} - {{todo}}</li>
diff --git a/demo/webpack/src/index.js b/demo/webpack/src/index.js
@@ -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()
diff --git a/demo/webpack/todolist.liquid b/demo/webpack/todolist.liquid
@@ -0,0 +1,6 @@
+{% layout 'html.liquid' %}
+<ul>
+  {% for todo in todos %}
+    {% render 'todo.liquid' with todo, index: forloop.index%}
+  {% endfor %}
+</ul>
diff --git a/demo/webpack/webpack.config.js b/demo/webpack/webpack.config.js
@@ -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'),
+  },
+};

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# LiquidJS for Node.js`
	`1`	`+# Using LiquidJS in ESM`
`2`	`2`
`3`	`3`	`## Get Started`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# LiquidJS for Express.js`
	`1`	`+# Using LiquidJS with Express.js`
`2`	`2`
`3`	`3`	`## Get Started`
`4`	`4`