atellmer · atellmer · Dec 15, 2024 · Dec 15, 2024 · Dec 17, 2024 · Dec 18, 2024
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,41 @@
+name: tests
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+      - development
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '20.13.1'
+
+    - name: Enable Corepack and install correct Yarn version
+      run: |
+        corepack enable
+        corepack prepare [email protected] --activate 
+
+    - name: Cache dependencies
+      uses: actions/cache@v3
+      with:
+        path: .yarn/cache
+        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+
+    - name: Run tests
+      run: yarn test
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1 +1,5 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
diff --git a/README.md b/README.md
@@ -7,6 +7,8 @@ The lightweight and powerful UI rendering engine without dependencies and writte
 <img alt="github release" src="https://img.shields.io/github/release/atellmer/dark.svg?style=flat&colorA=000063&colorB=673ab7">
 <img alt="npm downloads" src="https://img.shields.io/npm/dt/%40dark-engine%2Fcore.svg?style=flat&colorA=000063&colorB=673ab7">
 <img alt="bundle size" src="https://img.shields.io/bundlejs/size/%40dark-engine%2Fcore?label=size%20(gzip)&style=flat&colorA=000063&colorB=673ab7">
+<img alt="tests" src="https://github.com/atellmer/dark/actions/workflows/test.yml/badge.svg">
+
 </div>
 
 <div align="center"> 

diff --git a/examples/concurrent-router/index.tsx b/examples/concurrent-router/index.tsx
@@ -3,6 +3,7 @@ import { createRoot } from '@dark-engine/platform-browser';
 import { type Routes, Router, NavLink } from '@dark-engine/web-router';
 import { createGlobalStyle, styled } from '@dark-engine/styled';
 
+import { PageTransition } from '../spring-router/page-transition';
 import { Pending } from './pending';
 
 const Home = lazy(() => import('./home'));
@@ -63,7 +64,7 @@ type ShellProps = {
 const Shell = component<ShellProps>(
   ({ slot }) => {
     return (
-      <>
+      <PageTransition>
         <header>
           <NavLink to='/home'>Home</NavLink>
           <NavLink to='/about'>About</NavLink>
@@ -74,7 +75,7 @@ const Shell = component<ShellProps>(
           <Content>{slot}</Content>
         </Suspense>
         <SlowContent />
-      </>
+      </PageTransition>
     );
   },
   { displayName: 'Shell' },

diff --git a/examples/concurrent-router/webpack.config.mjs b/examples/concurrent-router/webpack.config.mjs
@@ -19,7 +19,7 @@ const config = env => ({
   devServer: {
     static: join(__dirname, './'),
     compress: false,
-    port: 9000,
+    port: 9004,
     historyApiFallback: true,
   },
   module: {

diff --git a/examples/concurrent-tabs/.gitignore → examples/concurrent-tabs-1/.gitignore b/examples/concurrent-tabs/.gitignore → examples/concurrent-tabs-1/.gitignore
diff --git a/examples/concurrent-tabs/index.html → examples/concurrent-tabs-1/index.html b/examples/concurrent-tabs/index.html → examples/concurrent-tabs-1/index.html
diff --git a/examples/concurrent-tabs/index.tsx → examples/concurrent-tabs-1/index.tsx b/examples/concurrent-tabs/index.tsx → examples/concurrent-tabs-1/index.tsx
@@ -9,7 +9,7 @@ const PostsTab = memo(
   component(() => {
     const items = [];
 
-    console.log('posts');
+    console.log('...posts...');
     for (let i = 0; i < 500; i++) {
       items.push(<SlowPost key={i} index={i} />);
     }

diff --git a/examples/concurrent-tabs/package.json → examples/concurrent-tabs-1/package.json b/examples/concurrent-tabs/package.json → examples/concurrent-tabs-1/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "dark-concurrent-tabs",
+  "name": "dark-concurrent-tabs-1",
   "version": "1.0.0",
   "scripts": {
     "start": "npm run dev",

diff --git a/examples/concurrent-tabs/webpack.config.mjs → ...ples/concurrent-tabs-1/webpack.config.mjs b/examples/concurrent-tabs/webpack.config.mjs → ...ples/concurrent-tabs-1/webpack.config.mjs
diff --git a/examples/concurrent-tabs/yarn.lock → examples/concurrent-tabs-1/yarn.lock b/examples/concurrent-tabs/yarn.lock → examples/concurrent-tabs-1/yarn.lock
diff --git a/examples/concurrent-tabs-2/.gitignore b/examples/concurrent-tabs-2/.gitignore
@@ -0,0 +1,10 @@
+/node_modules
+/.idea
+/.vscode
+npm-debug.log
+.DS_Store
+Thumbs.db
+yarn-error.log
+*.js
+*.js.map
+*.txt
diff --git a/examples/concurrent-tabs-2/index.html b/examples/concurrent-tabs-2/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Concurrent Tabs</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: Arial;
+      padding: 16px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="./build.js"></script>
+</body>
+
+</html>
diff --git a/examples/concurrent-tabs-2/index.tsx b/examples/concurrent-tabs-2/index.tsx
@@ -0,0 +1,95 @@
+import { type DarkElement, component, memo, useState, useTransition } from '@dark-engine/core';
+import { createRoot } from '@dark-engine/platform-browser';
+
+const AboutTab = component(() => {
+  return <p>Welcome to my profile!</p>;
+});
+
+const PostsTab = memo(
+  component(() => {
+    const items = [];
+
+    console.log('...posts...');
+    for (let i = 0; i < 500; i++) {
+      items.push(<SlowPost key={i} index={i} />);
+    }
+    return <ul className='items'>{items}</ul>;
+  }),
+);
+
+type SlowPostProps = {
+  index: number;
+};
+
+const SlowPost = component<SlowPostProps>(({ index }) => {
+  const startTime = performance.now();
+
+  while (performance.now() - startTime < 1) {
+    // Do nothing for 1 ms per item to emulate extremely slow code
+  }
+
+  return <li className='item'>Post #{index + 1}</li>;
+});
+
+const ContactTab = component(() => {
+  return (
+    <div class='red'>
+      <p>You can find me online here:</p>
+      <ul>
+        <li>[email protected]</li>
+        <li>+123456789</li>
+      </ul>
+    </div>
+  );
+});
+
+type TabButtonProps = {
+  slot: DarkElement;
+  isActive: boolean;
+  onClick: () => void;
+};
+
+const TabButton = component<TabButtonProps>(({ slot, isActive, onClick }) => {
+  if (isActive) {
+    return <b>{slot}</b>;
+  }
+
+  return <button onClick={onClick}>{slot}</button>;
+});
+
+const App = component(() => {
+  const [tab, setTab] = useState('about');
+  const [isPending, startTransition] = useTransition();
+
+  const selectTab = (nextTab: string) => {
+    startTransition(() => {
+      setTab(nextTab);
+    });
+  };
+
+  return (
+    <>
+      <TabButton isActive={tab === 'about'} onClick={() => selectTab('about')}>
+        About
+      </TabButton>
+      <TabButton isActive={tab === 'posts'} onClick={() => selectTab('posts')}>
+        Posts (slow)
+      </TabButton>
+      <TabButton isActive={tab === 'contact'} onClick={() => selectTab('contact')}>
+        Contact
+      </TabButton>
+      <hr />
+      {isPending ? (
+        <div>PENDING...</div>
+      ) : (
+        <>
+          {tab === 'about' && <AboutTab />}
+          {tab === 'posts' && <PostsTab />}
+          {tab === 'contact' && <ContactTab />}
+        </>
+      )}
+    </>
+  );
+});
+
+createRoot(document.getElementById('root')).render(<App />);
diff --git a/examples/concurrent-tabs-2/package.json b/examples/concurrent-tabs-2/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "dark-concurrent-tabs-2",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "npm run dev",
+    "build": "npx webpack --env production",
+    "dev": "npx webpack-dev-server --env development"
+  },
+  "devDependencies": {
+    "ts-loader": "9.4.2",
+    "typescript": "5.3.3",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.1",
+    "webpack-dev-server": "4.11.1"
+  }
+}
diff --git a/examples/concurrent-tabs-2/webpack.config.mjs b/examples/concurrent-tabs-2/webpack.config.mjs
@@ -0,0 +1,39 @@
+import { resolve, dirname, join } from 'node:path';
+
+import { alias } from '../../webpack.common.mjs';
+
+const __dirname = resolve(dirname(''));
+const config = env => ({
+  mode: env.production ? 'production' : 'development',
+  resolve: {
+    modules: ['node_modules'],
+    extensions: ['.js', '.ts', '.tsx'],
+    alias,
+  },
+  devtool: 'source-map',
+  entry: resolve(__dirname, './index.tsx'),
+  output: {
+    path: resolve(__dirname, './'),
+    filename: 'build.js',
+  },
+  devServer: {
+    static: join(__dirname, './'),
+    compress: false,
+    port: 9001,
+    historyApiFallback: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        loader: 'ts-loader',
+        options: {
+          transpileOnly: true,
+        },
+        exclude: /node_modules/,
+      },
+    ],
+  },
+});
+
+export default config;