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

demo/reactjs/src/App.js

@@ -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>
-    );
-  }
-}

demo/reactjs/src/App.test.js

@@ -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);
-});

demo/reactjs/src/App.test.tsx

@@ -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')
+})

demo/reactjs/src/App.tsx

@@ -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>
+    )
+  }
+}

demo/reactjs/src/AppWithHooks.test.tsx

@@ -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)')
+})

demo/reactjs/src/AppWithHooks.tsx

@@ -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})

demo/reactjs/src/ClickButton.css

@@ -1,5 +0,0 @@
-button {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-}

demo/reactjs/src/ClickButton.tsx

@@ -1,5 +1,3 @@
-import './ClickButton.css';
-import React from 'react';
 import { Context } from './Context';
 
 export function ClickButton() {

demo/reactjs/src/Context.js

@@ -1,3 +0,0 @@
-import React from "react";
-
-export const Context = React.createContext()

demo/reactjs/src/Context.ts

@@ -0,0 +1,7 @@
+import React from "react"
+
+interface ContextValue {
+  count?: () => void
+}
+
+export const Context = React.createContext<ContextValue>({})

demo/reactjs/src/engine.ts

@@ -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 
 });
 

demo/reactjs/src/index.js

@@ -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();

demo/reactjs/src/index.tsx

@@ -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>
+);

demo/reactjs/src/liquid.d.ts

@@ -0,0 +1,4 @@
+declare module '*.liquid' {
+  const content: any;
+  export default content;
+}

demo/reactjs/src/serviceWorker.js

@@ -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();
-    });
-  }
-}

demo/reactjs/src/views/demo.liquid

@@ -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>

demo/reactjs/src/views/showing-click-times.liquid

@@ -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>

demo/reactjs/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />