Issue #10: WIP: Monkey-patch to fix Lit-element style attributes. Sti…

…ll need to optimize heavily (without breaking context).

demo/src/main.js

@@ -55,6 +55,7 @@ const shadowStylesheet = ''; // TODO: ISSUE-6: Find good solution for defining t
 svelteRetag({
 	component: TabsDemo,
 	tagname: 'tabs-demo',
+	hydratable,
 	debugMode,
 	shadow,
 	href: shadowStylesheet,
@@ -64,6 +65,7 @@ svelteRetag({
 svelteRetag({
 	component: TabPanel,
 	tagname: 'tab-panel',
+	hydratable,
 	debugMode,
 	shadow,
 	href: shadowStylesheet,
@@ -72,6 +74,7 @@ svelteRetag({
 svelteRetag({
 	component: TabButton,
 	tagname: 'tab-button',
+	hydratable,
 	debugMode,
 	shadow,
 	href: shadowStylesheet,
@@ -80,6 +83,7 @@ svelteRetag({
 svelteRetag({
 	component: TabsWrapper,
 	tagname: 'tabs-wrapper',
+	hydratable,
 	debugMode,
 	shadow,
 	href: shadowStylesheet,
@@ -88,6 +92,7 @@ svelteRetag({
 svelteRetag({
 	component: TabList,
 	tagname: 'tab-list',
+	hydratable,
 	debugMode,
 	shadow,
 	href: shadowStylesheet,

index.js

@@ -98,20 +98,6 @@ export default function(opts) {
 			super();
 
 			this._debug('constructor()');
-			this.rand = Math.random();
-			//console.log(this.rand, 'constructor():', customElementPath(this));
-
-			// Temporarily instantiate the component ahead of time just so we can get its available properties (statically
-			// available). Note that we're doing it here in the constructor in case this component has context (so it may
-			// normally only be instantiated from within another component).
-			this.propMap = new Map();
-			// TODO: ISSUE-10: Fails since it also needs context. Make this more consistent or find cleaner method.
-			/*const context = this._getAncestorContext();
-			const propInstance = new opts.component({ target: document.createElement('div'), context });
-			for(let key of Object.keys(propInstance.$$.props)) {
-				this.propMap.set(key.toLowerCase(), key);
-			}
-			propInstance.$destroy();*/
 
 
 			// Setup shadow root early (light-DOM root is initialized in connectedCallback() below).
@@ -332,9 +318,6 @@ export default function(opts) {
 				node = node.parentNode;
 				let context = node?.componentInstance?.$$?.context;
 				if (context) {
-					if (!context._id) {
-						context._id = Math.random();
-					}
 					return context;
 				}
 			}
@@ -401,17 +384,34 @@ export default function(opts) {
 				// All other props are pulled from element attributes (see below)...
 			};
 
+
+
+			// Instantiate component into our root now, which is either the "light DOM" (i.e. directly under this element) or
+			// in the shadow DOM.
+			const context = this._getAncestorContext() || new Map();
+
+			// Temporarily instantiate the component ahead of time just so we can get its available properties (statically
+			// available). Note that we're doing it here in the constructor in case this component has context (so it may
+			// normally only be instantiated from within another component).
+			// TODO: ISSUE-10: See if possible to cache this in global scope since it doesn't need to be done on every single render.
+			// TODO: ISSUE-10: Also, don't re-initialize if no props actually needed to be translated. Just keep and only reinit if needed.
+			this.propMap = new Map();
+			const propInstance = new opts.component({ target: document.createElement('div'), context });
+			for(let key of Object.keys(propInstance.$$.props)) {
+				this.propMap.set(key.toLowerCase(), key);
+			}
+			propInstance.$destroy();
+
 			// Populate custom element attributes into the props object.
 			for(let attr of [...this.attributes]) {
 				// Note: Skip svelte-retag specific attributes (used for hydration purposes).
 				if (attr.name.indexOf('data-svelte-retag') !== -1) continue;
 				props[this._translateAttribute(attr.name)] = attr.value;
 			}
 
-			// Instantiate component into our root now, which is either the "light DOM" (i.e. directly under this element) or
-			// in the shadow DOM.
-			const context = this._getAncestorContext() || new Map();
+
 			this.componentInstance = new opts.component({ target: this._root, props: props, context });
+
 		}
 
 		/**