Use Attach for Composing State

Makefile

@@ -34,13 +34,14 @@ build: ## Build pypi package
 	python3 -m poetry build
 
 generatejs: ## Build javascript
+	python3 -m pymake rebuildcustompreact
 	python3 -m poetry run transcrypt -da -sf -de -m -n -b -ds -dc mything
 	python3 -c "print('moving generated js to docs/api/js/');import shutil;import os;os.chdir('__target__');files = os.listdir(); match = lambda file: file.endswith('.js'); move = lambda file: (os.path.exists('../docs/api/js/'+file) and os.remove('../docs/api/js/'+file)) or shutil.move(file, '../docs/api/js/'); list(map(move,filter(match, files)))"
 
 rebuildcustompreact: ## Download and minify custom preact browserify deps "
 	npm i browserify preact proppy proppy-preact uglify-js
-	./node_modules/.bin/browserify docs/api/custom-preact.browserify.js -o docs/api/custom-preact.js
-	./node_modules/.bin/uglifyjs docs/api/custom-preact.js -o docs/api/custom-preact.min.js
+	./node_modules/.bin/browserify docs/api/js/custom-preact.browserify.js -o docs/api/js/custom-preact.js
+	./node_modules/.bin/uglifyjs docs/api/js/custom-preact.js -o docs/api/js/custom-preact.min.js
 
 tdd: ## Run tests on file change
 	python3 -m poetry run ptw

docs/api/_headers

@@ -0,0 +1,2 @@
+/*
+  Access-Control-Allow-Origin: *

docs/api/js/custom-preact.browserify.js

@@ -1,10 +1,10 @@
 window.CustomHtml = window.CustomHtml || {};
 
 var preact = require('preact');
-for (var i in preact) { window.CustomHtml[i] = preact[i]; }
+for (var i in preact) { window.CustomHtml[i] = preact[i] }
 
 var proppy = require('proppy');
-for (var i in proppy) { window.CustomHtml[i] = proppy[i]; }
+for (var i in proppy) { window.CustomHtml[i] = proppy[i] }
 
 var proppyPreact = require('proppy-preact');
-for (var i in proppyPreact) { window.CustomHtml[i] = proppyPreact[i]; }
+for (var i in proppyPreact) { window.CustomHtml[i] = proppyPreact[i] }

mything/microfrontends/core/__init__.py

@@ -31,22 +31,22 @@ def mount(self, tag: str, attributes: typing.List, instance: IFrontend):
 
 class PureCssWebComponent(IComponent):
     def mount(self, tag: str, attributes: typing.List, instance: IFrontend):
-        def mounter(html, element, mountPoint, style, instance, attributes):
+        def mounter(html, element, mountPoint, style, instance, attributes, Provider):
             attrs = dict()
             for item in attributes:
                 attrs[item] = element.getAttribute(item)
-            custom = instance.view(attrs)
-            provider = html.h(html.ProppyProvider, {}, [custom])
+            provider = html.h(Provider, None, [instance.view(attrs)])
             html.render(provider, mountPoint)    
             root = element.attachShadow({ 'mode': 'open' })
             style.setAttribute('rel','stylesheet')
             style.setAttribute('href','js/pure-min.css')
             style.setAttribute('type','text/css')
             root.appendChild(style)
             root.appendChild(mountPoint)
-
-        def cb(html, me, create):
-            mounter(html, me, create("span"), create("link"), instance, attributes)
 
-        # __pragma__ ('js', '{}', 'class cls extends HTMLElement{connectedCallback(){cb(window.CustomHtml, this, x => document.createElement(x))}}')
+        def connect(html, me, create):
+            mounter(html, me, create("span"), create("link"), instance, attributes, html.ProppyProvider)
+
+        # call customElements.define with class that calls connect
+        # __pragma__ ('js', '{}', 'class cls extends HTMLElement{connectedCallback(){connect(window.CustomHtml, this, x => document.createElement(x))}}')
         # __pragma__ ('js', '{}', 'window.customElements.define(tag, cls, attributes);')

mything/microfrontends/counter/CounterFrontend.py

@@ -10,11 +10,13 @@ def config(self):
             self._html.withProps({'page': 'Home'}),
             self._html.withState('counter', 'setCounter', 0)
         )
-
-    def view(self, props={'page':'Home', 'counter':0, 'setCounter':lambda x: None}):
-        root = self._html.h('div', {}, [
+    
+    def root(self, props={'page':'Home', 'counter':0, 'setCounter':lambda x: None}):
+        return self._html.h('div', {}, [
             props['page'], 
             props['counter'], 
             self._html.h('button', {'class':'pure-button pure-button-primary','onClick': lambda: props['setCounter'](props['counter']+1)}, '+1')
         ])
-        return self._html.attach(self.config(), root)
+
+    def view(self, props):
+        return self._html.h(self._html.attach(self.config())(self.root))