Added support for element internals

Author: xdev1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-element",
-  "version": "0.0.230",
+  "version": "0.0.231",
   "description": "",
   "license": "LGPL-3.0",
   "main": "./index.js",
@@ -166,6 +166,7 @@
     "@types/chai": "^4.2.21",
     "@types/jest": "^27.0.1",
     "@types/mocha": "^9.0.0",
+    "@types/web": "^0.0.46",
     "babel-loader": "^8.2.2",
     "bestzip": "^2.2.0",
     "copyfiles": "^2.4.1",

src/main/js-element-hooks.ts

@@ -504,7 +504,23 @@ export const useEffect = hook(
   }
 )
 
-// === useInterval ======================================================
+// === useInternals ==================================================
+
+const internalsByElement = new WeakMap<HTMLElement, ElementInternals>()
+
+export const useInternals = hook('useInternals', () => {
+  const host = currentCtrl!.getHost()
+  let internals = internalsByElement.get(host)
+
+  if (!internals) {
+    internals = host.attachInternals()
+    internalsByElement.set(host, internals)
+  }
+
+  return internals
+})
+
+// === useInterval ===================================================
 
 export const useInterval = hook(
   'useInterval',

src/main/js-element.ts

@@ -84,6 +84,7 @@ function elem<E extends Component, C>(params: {
     init: (self: E, ctrl: Ctrl) => () => C
   }
   styles?: string | string[] | (() => string | string[])
+  formAssociated?: boolean
   uses?: any[]
 }): (clazz: new () => E) => void
 
@@ -128,6 +129,10 @@ function elem<E extends Component>(params: any) {
 
     const propConfigs = Array.from(elemConfigByClass.get(clazz)!.props.values())
 
+    if (params.formAssociated) {
+      definePropValue(clazz, 'formAssociated', true)
+    }
+
     if (propConfigs.length > 0) {
       addAttributeHandling(clazz, propConfigs)
     }
@@ -227,7 +232,7 @@ class BaseElement extends HTMLElement {
 
       elemConfig.styles = styles
     }
-    console.log(11111, elemConfig)
+
     if (elemConfig.shadow) {
       this.attachShadow({ mode: 'open' })
     }

tsconfig.dist.json

@@ -16,7 +16,7 @@
     "baseUrl": ".",
     "skipLibCheck": true,
     "typeRoots": ["node_modules/@types"],
-    "types": ["node", "mocha", "chai"],
+    "types": ["node", "mocha", "chai", "web"],
     "paths": {
       "js-element/hooks": ["src/main/js-element-hooks.ts"],
       "js-element/utils": ["src/main/js-element-utils.ts"],

tsconfig.json

@@ -24,7 +24,7 @@
       "js-element": ["src/main/js-element.ts"]
     },
     "typeRoots": ["node_modules/@types"],
-    "types": ["node"]
+    "types": ["node", "web"]
   },
   "files": [
     "src/main/js-element.ts",

yarn.lock

@@ -2747,6 +2747,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
   integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
 
+"@types/web@^0.0.46":
+  version "0.0.46"
+  resolved "https://registry.yarnpkg.com/@types/web/-/web-0.0.46.tgz#7f447e5eb3c511dbdc6f69e435f7ec4311d18b48"
+  integrity sha512-ki0OmbjSdAEfvmy5AYWFpMkRsPW+6h4ibQ4tzk8SJsS9dkrrD3B/U1eVvdNNWxAzntjq6o2sjSia6UBCoPH+Yg==
+
 "@types/webpack-env@^1.16.0":
   version "1.16.2"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.16.2.tgz#8db514b059c1b2ae14ce9d7bb325296de6a9a0fa"
@@ -10712,10 +10717,10 @@ rollup-pluginutils@^2.6.0:
   dependencies:
     estree-walker "^0.6.1"
 
-rollup@^2.56.2:
-  version "2.56.3"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.56.3.tgz#b63edadd9851b0d618a6d0e6af8201955a77aeff"
-  integrity sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg==
+rollup@^2.56.3:
+  version "2.59.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.59.0.tgz#108c61b0fa0a37ebc8d1f164f281622056f0db59"
+  integrity sha512-l7s90JQhCQ6JyZjKgo7Lq1dKh2RxatOM+Jr6a9F7WbS9WgKbocyUSeLmZl8evAse7y96Ae98L2k1cBOwWD8nHw==
   optionalDependencies:
     fsevents "~2.3.2"