From 33c7c8f3015b5446efb17b1abfa3ce174c427930 Mon Sep 17 00:00:00 2001 From: Harttle Date: Fri, 21 Oct 2022 14:53:11 +0800 Subject: [PATCH] docs: demo for using LiquidJS with webpack --- demo/esm/README.md | 2 +- demo/express/README.md | 2 +- demo/webpack/README.md | 10 ++++++++++ demo/webpack/layouts/html.liquid | 7 +++++++ demo/webpack/package.json | 18 +++++++++++++++++ demo/webpack/partials/footer.liquid | 1 + demo/webpack/partials/todo.liquid | 1 + demo/webpack/src/index.js | 30 +++++++++++++++++++++++++++++ demo/webpack/todolist.liquid | 6 ++++++ demo/webpack/webpack.config.js | 15 +++++++++++++++ 10 files changed, 90 insertions(+), 2 deletions(-) create mode 100644 demo/webpack/README.md create mode 100644 demo/webpack/layouts/html.liquid create mode 100644 demo/webpack/package.json create mode 100644 demo/webpack/partials/footer.liquid create mode 100644 demo/webpack/partials/todo.liquid create mode 100644 demo/webpack/src/index.js create mode 100644 demo/webpack/todolist.liquid create mode 100644 demo/webpack/webpack.config.js diff --git a/demo/esm/README.md b/demo/esm/README.md index d70afb158..728473c32 100644 --- 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 index 21f81a3a4..e436c79a5 100644 --- 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 new file mode 100644 index 000000000..13ed5b72f --- /dev/null +++ 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 +``` \ No newline at end of file diff --git a/demo/webpack/layouts/html.liquid b/demo/webpack/layouts/html.liquid new file mode 100644 index 000000000..98bdac6be --- /dev/null +++ b/demo/webpack/layouts/html.liquid @@ -0,0 +1,7 @@ + + + + {% block %}{% endblock %} + {% render "footer.liquid" %} + + \ No newline at end of file diff --git a/demo/webpack/package.json b/demo/webpack/package.json new file mode 100644 index 000000000..f7dea7aa8 --- /dev/null +++ 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 new file mode 100644 index 000000000..1ebe82b66 --- /dev/null +++ b/demo/webpack/partials/footer.liquid @@ -0,0 +1 @@ +{{title}} \ No newline at end of file diff --git a/demo/webpack/partials/todo.liquid b/demo/webpack/partials/todo.liquid new file mode 100644 index 000000000..d81a9f163 --- /dev/null +++ b/demo/webpack/partials/todo.liquid @@ -0,0 +1 @@ +
  • {{index}} - {{todo}}
    • diff --git a/demo/webpack/src/index.js b/demo/webpack/src/index.js new file mode 100644 index 000000000..20b04df59 --- /dev/null +++ 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 new file mode 100644 index 000000000..f7d9822db --- /dev/null +++ b/demo/webpack/todolist.liquid @@ -0,0 +1,6 @@ +{% layout 'html.liquid' %} + \ No newline at end of file diff --git a/demo/webpack/webpack.config.js b/demo/webpack/webpack.config.js new file mode 100644 index 000000000..69f2fd35e --- /dev/null +++ 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'), + }, +}; \ No newline at end of file