Transition component

package.json

@@ -16,8 +16,8 @@
   },
   "scripts": {
     "build": "yarn types && rimraf dist && yarn build:esm && yarn build:cjs && yarn build:node",
-    "build:esm": "rimraf dist/esm && rna build src/index.ts --output dist/esm/synapse.js --format esm --minify --platform browser",
-    "build:node": "rimraf dist/node && rna build src/index.ts --output dist/node/synapse.js --format esm --minify --platform node",
+    "build:esm": "rimraf dist/esm && rna build src/index.ts --output dist/esm/synapse.js --format esm --minify --jsxFactory h --jsxFragment Fragment --jsxModule '@chialab/dna' --platform browser",
+    "build:node": "rimraf dist/node && rna build src/index.ts --output dist/node/synapse.js --format esm --minify --jsxFactory h --jsxFragment Fragment --jsxModule '@chialab/dna' --platform node",
     "build:cjs": "rimraf dist/cjs && rna build src/index.ts --output dist/cjs/synapse.cjs --format cjs --minify --platform node",
     "types": "rimraf types && tsc --declaration --emitDeclarationOnly --declarationDir 'types'",
     "lint": "eslint src",

src/Micro.ts → src/App.tsx

@@ -4,6 +4,7 @@ import { Component, window, property, state, observe, listen } from '@chialab/dn
 import { Request } from './Router/Request';
 import { Response } from './Router/Response';
 import { Router } from './Router/Router';
+import { Page } from './Components/Page';
 
 enum NavigationDirection {
     back = 'back',
@@ -13,7 +14,7 @@ enum NavigationDirection {
 /**
  * A Web Component which handles routing.
  */
-export class Micro extends Component {
+export class App extends Component {
     /**
      * The History instance for the application.
      */
@@ -54,6 +55,17 @@ export class Micro extends Component {
         update: false,
     }) navigationDirection: NavigationDirection = NavigationDirection.forward;
 
+    /**
+     * @inheritdoc
+     */
+    render() {
+        if (!this.response) {
+            return null;
+        }
+
+        return <Page key={this.response} response={this.response} />;
+    }
+
     /**
      * Start the routing of the application.
      * @param path The initial path to navigate.

src/Components/Page.tsx

@@ -0,0 +1,11 @@
+import type { FunctionComponent } from '@chialab/dna';
+import type { Response } from '../Router/Response';
+
+/**
+ * Render response.
+ * @param data Page data.
+ * @returns A template to render the response.
+ */
+export const Page: FunctionComponent<{ response?: Response }> = function Page({ response }) {
+    return response?.render();
+};

src/Components/Transition.tsx

@@ -0,0 +1,91 @@
+import type { FunctionComponent, Template } from '@chialab/dna';
+import type { State } from '../Router/State';
+import type { Router } from '../Router/Router';
+import { window, Node } from '@chialab/dna';
+
+/**
+ * Transition component properties.
+ */
+type TransitionProps = {
+    router: Router;
+};
+
+/**
+ * Render responses with page transitions.
+ * @param data Page data to render.
+ * @param context The render context.
+ * @returns A template of pages to animate.
+ */
+export const Transition: FunctionComponent<TransitionProps> = function Transition({ router, children }, context) {
+    if (!router) {
+        throw new Error('Transition router is required');
+    }
+
+    const { node, store, requestUpdate } = context;
+    const currentState = store.get('state') as State | undefined;
+    const root = node.parentElement;
+
+    let previousChildren = store.get('previousChildren') as Template[] | undefined;
+    if (currentState !== router.state) {
+        if (root) {
+            const start = function(event) {
+                if (event.target.parentNode !== root) {
+                    return;
+                }
+
+                const counter = (store.get('counter') as number || 0) + 1;
+                store.set('counter', counter);
+            };
+
+            const end = function(event) {
+                if (event.target.parentNode !== root) {
+                    return;
+                }
+
+                const counter = (store.get('counter') as number || 0) - 1;
+                store.set('counter', counter);
+
+                if (counter === 0) {
+                    flush();
+                }
+            };
+
+            const flush = function() {
+                root.removeEventListener('animationstart', start);
+                root.removeEventListener('animationend', end);
+                store.delete('previousChildren');
+                requestUpdate?.();
+            };
+
+            root.addEventListener('animationstart', start);
+            root.addEventListener('animationend', end);
+            setTimeout(() => {
+                let node = context.start as Node;
+                while (node && node !== context.end) {
+                    node = node.nextSibling as Node;
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const style = window.getComputedStyle(node as HTMLElement);
+                        const animation = style.getPropertyValue('animation-name');
+                        const duration = style.getPropertyValue('animation-duration');
+                        if (animation !== 'none' && duration !== '0s') {
+                            return;
+                        }
+                    }
+                }
+
+                flush();
+            });
+        }
+
+        previousChildren = store.get('children') as Template[] | undefined;
+        store.set('counter', 0);
+        store.set('previousChildren', previousChildren);
+        store.set('children', children);
+        store.set('state', router.state);
+    }
+
+    return <>
+        {previousChildren}
+        {children}
+    </>;
+};

src/Router/Response.ts

@@ -86,7 +86,7 @@ export class Response {
     /**
      * The request to respond.
      */
-    protected request: Request;
+    readonly request: Request;
 
     /**
      * Create a Response object.

src/index.ts

@@ -11,8 +11,9 @@ export { Route } from './Router/Route';
 export { Middleware } from './Router/Middleware';
 export { History } from './Router/History';
 export { Router } from './Router/Router';
-export { Micro } from './Micro';
 export { App } from './App';
+export * from './Components/Page';
+export * from './Components/Transition';
 export * from './Helpers/Env';
 export * from './Helpers/Network';
 export * from './Helpers/Animations';

tsconfig.json

@@ -14,10 +14,12 @@
     "allowJs": false,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
+    "jsx": "preserve",
     "moduleResolution": "node",
   },
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "src/**/*.tsx"
   ],
   "exclude": []
 }