Starting with performance demo

Author: mcjazzyfunky

package-lock.json

@@ -56,6 +56,7 @@
     "cross-env": "^7.0.2",
     "dyo": "^2.0.4",
     "eslint": "^7.6.0",
+    "js-elements.preact": "file:preact",
     "js-spec": "^0.1.79",
     "lit-html": "^1.2.1",
     "preact": "^10.4.7",

package.json

@@ -41,15 +41,15 @@ function createConfig(pkg, moduleFormat, productive) {
 
       globals: {
         'lit-html': 'litHtml',
-        preact: 'preact',
+        //        preact: 'preact',
         '@bikeshaving/crank': 'crank',
         '@bikeshaving/crank/dom': 'crankDOM'
       }
     },
 
     external: [
       'lit-html',
-      'preact',
+      //'preact',
       '@bikeshaving/crank',
       '@bikeshaving/crank/dom'
     ],

rollup.config.js

@@ -0,0 +1 @@
+export { createElement, isValidElement, render } from 'preact'

src/main/internal/preact.js

@@ -6,7 +6,12 @@ import {
   Methods
 } from './api/core'
 
-import { h as createElement, patch, isElement } from './internal/superfine'
+//import { h as createElement, patch, isElement } from './internal/superfine'
+import {
+  createElement,
+  isValidElement as isElement,
+  render as patch
+} from './internal/preact'
 
 // === exports =======================================================
 
@@ -33,7 +38,7 @@ type Component<P extends Props = {}, M extends Methods = {}> = (
 
 // === defineElement =================================================
 
-const defineElement = createAdaption(superfineRenderer)
+const defineElement = createAdaption(patch)
 
 // === render ========================================================
 
@@ -62,7 +67,8 @@ function render(content: VElement, container: Element | string) {
   target.innerHTML = ''
 
   if (content !== null) {
-    patch(target, content)
+    console.log(1111, content)
+    patch(content, target)
   }
 }
 

src/main/js-elements.ts

@@ -0,0 +1,8 @@
+/** @jsx h */
+import { component, h, prop } from '../../main/js-elements'
+
+component('performance-demo', {
+  render(c) {
+    return h('div', null, 'Will be implemented soon ...')
+  }
+})

src/stories/demos/performance-demo.ts

@@ -23,7 +23,7 @@ component('simple-counter-jsx', {
       },
       () => [count]
     )
-    console.log('xxxx')
+
     return () =>
       h(
         'div',

src/stories/demos/simple-counter-jsx-demo.tsx

@@ -14,6 +14,7 @@ import './demos/mouse-demo'
 import './demos/provision-demo'
 import './demos/interval-demo'
 import './demos/promise-demo'
+import './demos/performance-demo'
 import './demos/store-demo'
 import './demos/todo-mvc'
 import './styles.css'
@@ -36,6 +37,7 @@ export const Provision = () => '<provision-demo></provision-demo'
 export const Iterator = () => '<iterator-demo/>'
 export const Interval = () => '<interval-demo></iterator-demo>'
 export const Promises = () => '<promise-demo></promise-demo>'
+export const Performance = () => '<performance-demo></performance-demo>'
 export const Stores = () => '<store-demo></store-demo>'
 
 /*