test: refactor test:demo script into demo/*/test.sh

2026-09-15 04:10:40 -07:00 · 2024-08-29 01:30:25 +08:00
parent da516a4fd6
commit 62bb20e433
48 changed files with 3018 additions and 23043 deletions
@@ -12,7 +12,7 @@ jobs:
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
-          node-version: '20'
+          node-version: '22'
      - name: Install dependencies
        run: npm ci
      - name: Test
@@ -5,6 +5,7 @@
  "description": "Liquidjs Demo for Browser Usage",
  "main": "index.html",
  "scripts": {
+    "test": "echo not implemented",
    "start": "http-server -c-1 "
  },
  "author": "harttle <[email protected]>",
@@ -1,9 +1,10 @@
 {
-  "name": "liquidjs-demo-nodejs",
+  "name": "liquidjs-demo-esm",
  "description": "Node.js demo for liquidjs",
  "private": true,
  "main": "index.mjs",
  "scripts": {
+    "test": "./test.sh",
    "start": "node index.mjs"
  },
  "dependencies": {
@@ -0,0 +1,3 @@
+set -ex
+
+npm start | grep 'LiquidJS Demo'
@@ -1,12 +1,12 @@
 {
-  "name": "express-demo",
+  "name": "liquidjs-demo-express",
  "version": "1.0.0",
  "private": true,
  "description": "Express Demo Using liquidjs",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "./test.sh"
  },
  "author": "harttle",
  "license": "MIT",
@@ -0,0 +1,20 @@
+set -x
+
+LOG_FILE=$(mktemp)
+npm start > $LOG_FILE 2>&1 &
+SERVER_PID=$!
+while ! grep -q "Express running" "$LOG_FILE"; do
+  if ! kill -0 $SERVER_PID; then
+    echo "Server exited unexpectedly."
+    cat $LOG_FILE
+    return 1
+  fi
+  sleep 1
+done
+curl http://127.0.0.1:3000 | grep -q 'Welcome to LiquidJS'
+RESULT=$?
+killall node
+rm $LOG_FILE
+if [ $RESULT != 0 ]; then
+  exit 1
+fi
@@ -4,6 +4,7 @@
  "private": true,
  "main": "index.js",
  "scripts": {
+    "test": "./test.sh",
    "start": "node index.js"
  },
  "dependencies": {
@@ -0,0 +1,3 @@
+set -ex
+
+npm start | grep 'NodeJS Demo for LiquidJS'
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>React Demo for LiquidJS</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
@@ -1,20 +1,25 @@
 {
-  "name": "react-liquidjs",
+  "name": "liquidjs-demo-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "html-react-parser": "^0.4.7",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
    "liquidjs": "latest",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
-    "react-promise": "^2.0.3",
-    "react-scripts": "2.0.4"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-promise": "^3.0.2",
+    "react-router-dom": "^6.26.1",
+    "vite": "^5.4.2",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^5.0.1"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage --watch=false"
  },
  "browserslist": [
    ">0.2%",
@@ -23,6 +28,12 @@
    "not op_mini all"
  ],
  "devDependencies": {
-    "@babel/core": "^7.8.7"
+    "@babel/core": "^7.8.7",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^18.3.4",
+    "@vitest/coverage-v8": "^2.0.5",
+    "jsdom": "^25.0.0",
+    "vitest": "^2.0.5"
  }
 }
@@ -1,41 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="result"></div>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
@@ -1,15 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
@@ -1,23 +0,0 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-import tpl from './views/demo.liquid';
-import Parser from 'html-react-parser';
-import { engine } from './engine';
-
-export class App extends Component {
-  async componentDidMount() {
-    const html = await engine.renderFile(tpl.toString(), {name: 'alice', logo: logo })
-    this.setState({ html })  // outputs "Alice"
-  }
-
-  state = { html: '' }
-
-  render() { 
-    return (
-      <div className="App">
-        {Parser(`${this.state.html}`)}
-      </div>
-    );
-  }
-}
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-  ReactDOM.unmountComponentAtNode(div);
-});
@@ -0,0 +1,9 @@
+import { expect, test } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { App } from './App';
+
+test('App rendered correctly', async () => {
+  render(<App/>)
+  const h2 = await screen.findByTestId('heading')
+  expect(h2.textContent).toEqual('Welcome to Liquid')
+})
@@ -0,0 +1,23 @@
+import { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import demo from './views/demo.liquid?raw';
+import { engine } from './engine';
+
+const template = engine.parse(demo)
+
+export class App extends Component {
+  state = { html: '' }
+
+  async componentDidMount() {
+    const html = await engine.render(template, {name: 'liquid', logo })
+    this.setState({ html })
+  }
+
+  render() { 
+    return (
+      <div className="App" dangerouslySetInnerHTML={{__html: this.state.html}}>
+      </div>
+    )
+  }
+}
@@ -0,0 +1,9 @@
+import { expect, test } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { App } from './AppWithHooks';
+
+test('AppWithHooks rendered correctly', async () => {
+  render(<App/>)
+  const h2 = await screen.findByTestId('heading')
+  expect(h2.textContent).toEqual('Welcome to Liquid (hooks)')
+})
@@ -1,34 +1,28 @@
-/*
- * function Component with Hooks: Modify ./index.js to apply this file
- */
-import React, { useState, useLayoutEffect } from 'react';
+import { useState, useLayoutEffect } from 'react';
 import './App.css';
 import logo from './logo.svg';
-import tplsrc from './views/showing-click-times.liquid';
-import Parser from 'html-react-parser';
+import showingClickTimes from './views/showing-click-times.liquid?raw';
 import { engine } from './engine';
 import { Context } from './Context';
 import { ClickButton } from './ClickButton';

-const fetchTpl = engine.getTemplate(tplsrc.toString())
+const tpl = engine.parse(showingClickTimes)

 export function App() {
  const [state, setState] = useState({
-    logo: logo,
-    name: 'alice',
+    logo,
+    name: 'liquid',
    clickCount: 0,
    html: ''
  });

  useLayoutEffect(() => {
-    fetchTpl
-      .then(tpl => engine.render(tpl, state))
-      .then(html => setState({...state, html}))
+    engine.render(tpl, state).then(html => setState({...state, html}))
  }, [state.clickCount])

  return (
    <div className="App">
-      {Parser(`${state.html}`)}
+      <div dangerouslySetInnerHTML={{__html: state.html}}></div>
      <Context.Provider
        value={{
          count: () => setState({...state, clickCount: state.clickCount + 1})
@@ -1,5 +0,0 @@
-button {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-}
@@ -1,5 +1,3 @@
-import './ClickButton.css';
-import React from 'react';
 import { Context } from './Context';

 export function ClickButton() {
@@ -1,3 +0,0 @@
-import React from "react";
-
-export const Context = React.createContext()
@@ -0,0 +1,7 @@
+import React from "react"
+
+interface ContextValue {
+  count?: () => void
+}
+
+export const Context = React.createContext<ContextValue>({})
@@ -1,8 +1,7 @@
-import path from 'path';
 import { Liquid } from 'liquidjs';

 export const engine = new Liquid({
-    root: path.resolve(__dirname, 'views/'),  // dirs to lookup layouts/includes
+    root: 'views/',
    extname: '.liquid'     // the extname used for layouts/includes, defaults 
 });

@@ -1,13 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import * as serviceWorker from './serviceWorker';
-import { App } from './App';
-// import { App } from './AppWithHooks';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
@@ -0,0 +1,20 @@
+import { createRoot } from 'react-dom/client';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+} from "react-router-dom";
+import './index.css';
+import { App } from './App';
+import { App as AppWithHooks } from './AppWithHooks';
+
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+  <Router>
+    <Routes>
+      <Route path="/" Component={App}/>
+      <Route path="/with-hooks" Component={AppWithHooks}/>
+    </Routes>
+  </Router>
+);
@@ -0,0 +1,4 @@
+declare module '*.liquid' {
+  const content: any;
+  export default content;
+}
@@ -1,127 +0,0 @@
-// In production, we register a service worker to serve assets from local cache.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
-// cached resources are updated in the background.
-
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
-
-const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://goo.gl/SC7cgQ'
-          );
-        });
-      } else {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then(registration => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === 'installed') {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the old content will have been purged and
-              // the fresh content will have been added to the cache.
-              // It's the perfect time to display a "New content is
-              // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.');
-
-              // Execute callback
-              if (config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
-
-              // Execute callback
-              if (config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then(response => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      if (
-        response.status === 404 ||
-        response.headers.get('content-type').indexOf('javascript') === -1
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
-    });
-}
-
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
-      registration.unregister();
-    });
-  }
-}
@@ -1,18 +1,10 @@
 <header className="App-header">
    {{ logo | image }}
-    <h2>Welcome {{name | capitalize}}</h2>
+    <h2 data-testid="heading">Welcome to {{name | capitalize}}</h2>
    <p>
-         Edit <code>src/App.js</code> and save to reload. 
+    Edit <code>src/views/demo.liquid</code> and save to reload. 
    </p>
    <p>
-         You are using liquidjs & Reactjs 
+         You are using LiquidJS & React
    </p>
-    <a
-        className="App-link"
-        href="https://reactjs.org"
-        target="_blank"
-        rel="noopener noreferrer"
-    >
-        Learn React
-    </a>
 </header>
@@ -1,14 +1,6 @@
 <header className="App-header">
    {{ logo | image }}
-    <h2>Welcome {{name | capitalize}}</h2>
-    <p>Edit <code>src/App.js</code> and save to reload.</p>
+    <h2 data-testid="heading">Welcome to {{name | capitalize}} (hooks)</h2>
+    <p>Edit <code>src/views/showing-click-times.liquid</code> and save to reload.</p>
    <p>You have clicked {{clickCount}} times.</p>
-    <a
-        className="App-link"
-        href="https://reactjs.org"
-        target="_blank"
-        rel="noopener noreferrer"
-    >
-        Learn React
-    </a>
 </header>
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client", "vite-plugin-svgr/client"]
+  },
+  "include": ["src"]
+}
@@ -0,0 +1,20 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '/',
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    css: true,
+    reporters: ['verbose'],
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*'],
+      exclude: [],
+    }
+  },
+  assetsInclude: ["**/*.liquid"]
+})
@@ -4,6 +4,7 @@
  "description": "liquid template parsing",
  "main": "index.ts",
  "scripts": {
+    "test": "./test.sh",
    "start": "ts-node index.ts"
  },
  "dependencies": {
@@ -0,0 +1,3 @@
+set -ex
+
+npm start | grep '\[11:8] {{ todo }}'
@@ -7,5 +7,6 @@ LiquidJS is written in TypeScript and type definitions are available in `liquidj
 ```bash
 cd demo/typescript
 npm install
+npm run build
 npm start
 ```
@@ -1,7 +1,7 @@
 import { Value, Liquid, TagToken, Context, Emitter, Tag, TopLevelToken } from 'liquidjs'

 const engine = new Liquid({
-  root: __dirname,
+  root: process.cwd(),
  extname: '.liquid'
 })

@@ -7,7 +7,6 @@
      "name": "liquidjs-demo-typescript",
      "dependencies": {
        "liquidjs": "latest",
-        "ts-node": "^8.10.2",
        "typescript": "^4.2.4"
      },
      "devDependencies": {
@@ -20,16 +19,6 @@
      "integrity": "sha512-hcU9AIQVHmPnmjRK+XUUYlILlr9pQrsqSrwov/JK1pnf3GTQowVBhx54FbvM0AU/VXGH4i3+vgXS5EguR7fysA==",
      "dev": true
    },
-    "node_modules/arg": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
-      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="
-    },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
-    },
    "node_modules/commander": {
      "version": "10.0.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
@@ -38,14 +27,6 @@
        "node": ">=14"
      }
    },
-    "node_modules/diff": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "engines": {
-        "node": ">=0.3.1"
-      }
-    },
    "node_modules/liquidjs": {
      "version": "10.8.3",
      "resolved": "https://registry.npmjs.org/liquidjs/-/liquidjs-10.8.3.tgz",
@@ -65,52 +46,6 @@
        "url": "https://opencollective.com/liquidjs"
      }
    },
-    "node_modules/make-error": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
-    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/ts-node": {
-      "version": "8.10.2",
-      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz",
-      "integrity": "sha512-ISJJGgkIpDdBhWVu3jufsWpK3Rzo7bdiIXJjQc0ynKxVOVcg2oIrf2H2cejminGrptVc6q6/uynAHNCuWGbpVA==",
-      "dependencies": {
-        "arg": "^4.1.0",
-        "diff": "^4.0.1",
-        "make-error": "^1.1.1",
-        "source-map-support": "^0.5.17",
-        "yn": "3.1.1"
-      },
-      "bin": {
-        "ts-node": "dist/bin.js",
-        "ts-node-script": "dist/bin-script.js",
-        "ts-node-transpile-only": "dist/bin-transpile.js",
-        "ts-script": "dist/bin-script-deprecated.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      },
-      "peerDependencies": {
-        "typescript": ">=2.7"
-      }
-    },
    "node_modules/typescript": {
      "version": "4.9.4",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
@@ -122,14 +57,6 @@
      "engines": {
        "node": ">=4.2.0"
      }
-    },
-    "node_modules/yn": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
-      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "engines": {
-        "node": ">=6"
-      }
    }
  }
 }
@@ -3,12 +3,14 @@
  "private": true,
  "description": "TypeScript demo for liquidjs",
  "main": "index.ts",
+  "type": "module",
  "scripts": {
-    "start": "ts-node index.ts"
+    "build": "tsc",
+    "test": "./test.sh",
+    "start": "node dist/index.js"
  },
  "dependencies": {
    "liquidjs": "latest",
-    "ts-node": "^8.10.2",
    "typescript": "^4.2.4"
  },
  "devDependencies": {
@@ -0,0 +1,3 @@
+set -ex
+
+npm run build && npm start | grep 'TypeScript Demo for LiquidJS'
@@ -1,9 +1,12 @@
 {
  "compilerOptions": {
-    "target": "es6",
-    "moduleResolution": "node",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
    "types": [
      "node"
-    ]
-  }
+    ],
+    "outDir": "dist"
+  },
+  "include": ["*.ts"]
 }
@@ -5,6 +5,7 @@
  "main": "dist/index.js",
  "scripts": {
    "start": "node dist/index.js",
+    "test": "./test.sh",
    "build": "webpack"
  },
  "dependencies": {
@@ -0,0 +1,4 @@
+set -ex
+
+npm run build
+npm start | grep 'Webpack Demo for LiquidJS'
@@ -23,7 +23,7 @@
    "test": "jest",
    "test:coverage": "jest --coverage src test/integration",
    "test:e2e": "jest test/e2e",
-    "test:demo": "./test/demo/check.sh",
+    "test:demo": "./test/demo/test.sh",
    "perf:diff": "bin/perf-diff.sh",
    "perf:engines": "cd benchmark && npm run engines",
    "version": "npm run build && npm test",
@@ -1,85 +0,0 @@
-# npm run build before running this check
-set -x
-
-npm link
-
-cd demo/webpack
-npm link liquidjs
-npm run build
-if npm start | grep 'Webpack Demo for LiquidJS'; then
-  echo [success] demo/webpack
-else
-  echo [fail] demo/webpack
-  exit 1
-fi
-cd -
-
-
-cd demo/nodejs
-npm link liquidjs
-if npm start | grep 'NodeJS Demo for LiquidJS'; then
-  echo [success] demo/nodejs
-else
-  echo [fail] demo/nodejs
-  exit 1
-fi
-cd -
-
-
-cd demo/template
-npm link liquidjs
-if npm start | grep '\[11:8] {{ todo }}'; then
-  echo [success] demo/template
-else
-  echo [fail] demo/template
-  exit 1
-fi
-cd -
-
-
-cd demo/typescript
-npm link liquidjs
-if npm start | grep 'TypeScript Demo for LiquidJS'; then
-  echo [success] demo/typescript
-else
-  echo [fail] demo/typescript
-  exit 1
-fi
-cd -
-
-
-cd demo/esm
-npm link liquidjs
-if npm start | grep 'LiquidJS Demo'; then
-  echo [success] demo/esm
-else
-  echo [fail] demo/esm
-  exit 1
-fi
-cd -
-
-cd demo/express
-npm link liquidjs
-
-LOG_FILE=$(mktemp)
-npm start > $LOG_FILE 2>&1 &
-SERVER_PID=$!
-while ! grep -q "Express running" "$LOG_FILE"; do
-  if ! kill -0 $SERVER_PID; then
-    echo "Server exited unexpectedly."
-    cat $LOG_FILE
-    return 1
-  fi
-  sleep 1
-done
-curl http://127.0.0.1:3000 | grep -q 'Welcome to LiquidJS'
-RESULT=$?
-killall node
-rm $LOG_FILE
-if [ $RESULT = 0 ]; then
-  echo [success] demo/express
-else
-  echo [fail] demo/express
-  exit 1
-fi
-cd -
@@ -0,0 +1,23 @@
+# npm run build before running this check
+set -x
+export CI=true
+
+if [ ! -d dist ]; then
+  echo >2 'build and link liquidjs before run test.sh'
+  exit 1
+fi
+
+npm link
+
+for demo in $(ls demo); do
+  cd demo/$demo
+  npm link liquidjs
+
+  if npm test; then
+    echo [success] demo/webpack
+  else
+    echo [fail] demo/webpack
+    exit 1
+  fi
+  cd -
+done