{"_id":"ce-la-react","_rev":"10-d38d110ccd5d44867e37a674e7f82889","name":"ce-la-react","dist-tags":{"latest":"0.3.2"},"versions":{"0.0.0":{"name":"ce-la-react","version":"0.0.0","author":{"name":"@muxinc"},"license":"BSD-3-Clause","_id":"ce-la-react@0.0.0","maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"homepage":"https://github.com/muxinc/ce-la-react#readme","bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"dist":{"shasum":"51f42b779ff659e026a50934d180b09c198f3277","tarball":"https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.0.0.tgz","fileCount":4,"integrity":"sha512-QJyLDYX9M4c2CaDFdegw1iLDXPz22SbFI54lVdm0r03NZcldOUJq0wcFgthNyj05czknBHnoxzbdQj65L227ng==","signatures":[{"sig":"MEUCICEmFxQAaiV0AifTAYTkhjjIgvvYS7ALyw4q5lak9WuqAiEArLITtm6gwkOYUeY5i3AxquK+p5GCiSkOylWoRtPCbeg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9904},"main":"dist/ce-la-react.js","type":"module","types":"dist/ce-la-react.d.ts","gitHead":"a099e6ed8df570c7f9c1c31d0d62cd5399658e07","scripts":{"lint":"biome lint src/*","test":"run-s test:*","build":"run-s build:*","watch":"run-p 'build:esm -- --watch=forever' 'build:types -- --watch'","pretest":"esbuild 'test/*.tsx' --bundle --outdir=tmp --define:process.env.NODE_ENV=\\\"test\\\"","test:18":"wet test test/test-react18.html --coverage","test:19":"wet test test/test-react19.html --coverage","build:esm":"esbuild 'src/*' --format=esm --outdir=dist","build:types":"tsc --outDir dist","prepublishOnly":"run-s lint build"},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"repository":{"url":"git+https://github.com/muxinc/ce-la-react.git","type":"git"},"_npmVersion":"10.8.1","description":"Create a React component from a custom element.","directories":{},"_nodeVersion":"20.12.2","_hasShrinkwrap":false,"devDependencies":{"zora":"^6.0.0","react":"^19.0.0","esbuild":"^0.24.0","wet-run":"^1.2.5","react-dom":"^19.0.0","typescript":"^5.7.2","npm-run-all":"^4.1.5","@types/react":"^19.0.1","@biomejs/biome":"^1.9.4","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ce-la-react_0.0.0_1734453736153_0.8456496984176869","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"ce-la-react","version":"0.1.0","author":{"name":"@muxinc"},"license":"BSD-3-Clause","_id":"ce-la-react@0.1.0","maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"homepage":"https://github.com/muxinc/ce-la-react#readme","bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"dist":{"shasum":"4a851b2eef4ec1b27b5655ad139ba13ca952f851","tarball":"https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.1.0.tgz","fileCount":5,"integrity":"sha512-faPgsFuOXgLvMmwBQHZ8WnfFvwmpNSYikv9Nk5A1CMzt4jGnHCF/d3kubZnzhR8WRztCmHWjbU3B0RQMRKyXIQ==","signatures":[{"sig":"MEUCIQDaiTCnXT6BYGh68bgDMaP/0MAhnYyLM/seeDLtyniBpgIgJ6yf5fauVpbZQP0UKr3cLs7r9ZX5NdXzJUmlhuu9r3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/ce-la-react@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":19467},"main":"dist/ce-la-react.js","type":"module","types":"dist/ce-la-react.d.ts","gitHead":"ddbfb42dac5a0347f02329b2cf9ebb0097f256cf","scripts":{"lint":"biome lint src/*","test":"run-s test:*","build":"run-s build:*","watch":"run-p 'build:esm -- --watch=forever' 'build:types -- --watch'","pretest":"esbuild 'test/*.tsx' --bundle --outdir=tmp --define:process.env.NODE_ENV=\\\"test\\\"","test:18":"wet test test/test-react18.html --coverage","test:19":"wet test test/test-react19.html --coverage","build:esm":"esbuild 'src/*' --format=esm --outdir=dist","build:types":"tsc --outDir dist","prepublishOnly":"run-s lint build"},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"repository":{"url":"git+https://github.com/muxinc/ce-la-react.git","type":"git"},"_npmVersion":"10.9.0","description":"Create a React component from a custom element.","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"zora":"^6.0.0","react":"^19.0.0","esbuild":"^0.24.0","wet-run":"^1.2.5","react-dom":"^19.0.0","typescript":"^5.7.2","npm-run-all":"^4.1.5","@types/react":"^19.0.1","@biomejs/biome":"^1.9.4","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ce-la-react_0.1.0_1734533563871_0.668254727494221","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"ce-la-react","version":"0.1.1","author":{"name":"@muxinc"},"license":"BSD-3-Clause","_id":"ce-la-react@0.1.1","maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"homepage":"https://github.com/muxinc/ce-la-react#readme","bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"dist":{"shasum":"a4e91004e8742ad5b6c63069b924a3f67cebb797","tarball":"https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.1.1.tgz","fileCount":5,"integrity":"sha512-IaGTP+cGHMMSYjnvINPQih1/GSqOAIPrSeywfyDYHOugmCnwPRwP8SCK13tv1GetE3MiwbZXlfow9yZC1pgREA==","signatures":[{"sig":"MEQCIFmeFmbFobh03cW1XcYk2hoEdk4lj6/AeQU/obH7wPOCAiBsEqJmWz2mXafMVQoZHfLaQ0H62wM4xIdzUCorGDrQdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/ce-la-react@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":19477},"main":"dist/ce-la-react.js","type":"module","types":"dist/ce-la-react.d.ts","gitHead":"56622da503f8e3a59a336e80f6161d47425d9a2a","scripts":{"lint":"biome lint src/*","test":"run-s test:*","build":"run-s build:*","watch":"run-p 'build:esm -- --watch=forever' 'build:types -- --watch'","pretest":"esbuild 'test/*.tsx' --bundle --outdir=tmp --define:process.env.NODE_ENV=\\\"test\\\"","test:18":"wet test test/test-react18.html --coverage","test:19":"wet test test/test-react19.html --coverage","build:esm":"esbuild 'src/*' --format=esm --outdir=dist","build:types":"tsc --outDir dist","prepublishOnly":"run-s lint build"},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"repository":{"url":"git+https://github.com/muxinc/ce-la-react.git","type":"git"},"_npmVersion":"10.9.0","description":"Create a React component from a custom element.","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"zora":"^6.0.0","react":"^19.0.0","esbuild":"^0.24.0","wet-run":"^1.2.5","react-dom":"^19.0.0","typescript":"^5.7.2","npm-run-all":"^4.1.5","@types/react":"^19.0.1","@biomejs/biome":"^1.9.4","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ce-la-react_0.1.1_1734555315433_0.7951895210911473","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"ce-la-react","version":"0.1.2","author":{"name":"@muxinc"},"license":"BSD-3-Clause","_id":"ce-la-react@0.1.2","maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"homepage":"https://github.com/muxinc/ce-la-react#readme","bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"dist":{"shasum":"f29c736da649a3d9319a87200c153560f867491d","tarball":"https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.1.2.tgz","fileCount":5,"integrity":"sha512-npUc0YxVRzaiSNM46abmTdhORlK881nlllhnOHmjdCR893fWFG2sy9IL1YVk1ACNQo9nYO9zjdas4bTsqBTz9g==","signatures":[{"sig":"MEUCIQCKdLX49DAOEE+wkmG1VUMFd4pqUkW34HCnk9YTdNoWrwIgDpbKkP/9PuQAs/WGa3vmX8ZNa3E/2JnhHTow6UYVWlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/ce-la-react@0.1.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":19517},"main":"dist/ce-la-react.js","type":"module","types":"dist/ce-la-react.d.ts","gitHead":"c8ccad1d33641913407315cbfda494056a7d97c8","scripts":{"lint":"biome lint src/*","test":"run-s test:*","build":"run-s build:*","watch":"run-p 'build:esm -- --watch=forever' 'build:types -- --watch'","pretest":"esbuild 'test/*.tsx' --bundle --outdir=tmp --define:process.env.NODE_ENV=\\\"test\\\"","test:18":"wet test test/test-react18.html --coverage","test:19":"wet test test/test-react19.html --coverage","build:esm":"esbuild 'src/*' --format=esm --outdir=dist","build:types":"tsc --outDir dist","prepublishOnly":"run-s lint build"},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"repository":{"url":"git+https://github.com/muxinc/ce-la-react.git","type":"git"},"_npmVersion":"10.9.0","description":"Create a React component from a custom element.","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"zora":"^6.0.0","react":"^19.0.0","esbuild":"^0.24.0","wet-run":"^1.2.5","react-dom":"^19.0.0","typescript":"^5.7.2","npm-run-all":"^4.1.5","@types/react":"^19.0.1","@biomejs/biome":"^1.9.4","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ce-la-react_0.1.2_1734556170281_0.5764193197105623","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"ce-la-react","version":"0.1.3","author":{"name":"@muxinc"},"license":"BSD-3-Clause","_id":"ce-la-react@0.1.3","maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"homepage":"https://github.com/muxinc/ce-la-react#readme","bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"dist":{"shasum":"ccb34ec24091bd8be3da40ddcedb4a99ae1db72f","tarball":"https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.1.3.tgz","fileCount":5,"integrity":"sha512-zZwEEJv9XukeEGbswQXObaDJjYAufOIilSnDg4BWCpKNEYN84H9fpaB+wl+rYKWOIH4wBBPbLnOxKvDIwsL/JQ==","signatures":[{"sig":"MEUCID5sv9F3VH66bPUGWE2hbzHM3WSGcicSIY+eCDEnhhTuAiEAoCdqzgbH5ooqB1HfREXA0xxt3rJB2QNwSJFtjCXO6T4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/ce-la-react@0.1.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":19651},"main":"dist/ce-la-react.js","type":"module","types":"dist/ce-la-react.d.ts","gitHead":"92f7f64b0e4cbc7995ab8f3ff3d9abd3c2991d58","scripts":{"lint":"biome lint src/*","test":"run-s test:*","build":"run-s build:*","watch":"run-p 'build:esm -- --watch=forever' 'build:types -- --watch'","pretest":"esbuild 'test/*.tsx' --bundle --outdir=tmp --define:process.env.NODE_ENV=\\\"test\\\"","test:18":"wet test test/test-react18.html --coverage","test:19":"wet test test/test-react19.html --coverage","build:esm":"esbuild 'src/*' --format=esm --outdir=dist","build:types":"tsc --outDir dist","prepublishOnly":"run-s lint build"},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"repository":{"url":"git+https://github.com/muxinc/ce-la-react.git","type":"git"},"_npmVersion":"10.9.0","description":"Create a React component from a custom element.","directories":{},"_nodeVersion":"22.12.0","_hasShrinkwrap":false,"devDependencies":{"zora":"^6.0.0","react":"^19.0.0","esbuild":"^0.24.0","wet-run":"^1.2.5","react-dom":"^19.0.0","typescript":"^5.7.2","npm-run-all":"^4.1.5","@types/react":"^19.0.1","@biomejs/biome":"^1.9.4","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ce-la-react_0.1.3_1734621890536_0.4344487193359561","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"ce-la-react","version":"0.2.0","author":{"name":"@muxinc"},"license":"BSD-3-Clause","_id":"ce-la-react@0.2.0","maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"homepage":"https://github.com/muxinc/ce-la-react#readme","bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"dist":{"shasum":"7643caeab063b6e87dd0ee73d09ae370b424ad66","tarball":"https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.2.0.tgz","fileCount":5,"integrity":"sha512-hWjpCBq0CzYewrRhkbf8HEI1Hx2fGAIQWTBfJDzgxe1p/gaefmBsCZHKk0kKgVDxV7BN5LfdyGKZfWKrKzSqHQ==","signatures":[{"sig":"MEUCIQCxTnop9T9yVEo7FjRpvCwpsmRLLMPHV+clDHgLwTdlZgIgDIFLWQ3K+7hYDY4ilYWAtNUJSY296dAUPmo6Akpuc7w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/ce-la-react@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":19691},"main":"dist/ce-la-react.js","type":"module","types":"dist/ce-la-react.d.ts","gitHead":"c4c3c80dc23a45f42a396bb4a5d29b8e04e196fa","scripts":{"lint":"biome lint src/*","test":"run-s test:*","build":"run-s build:*","watch":"run-p 'build:esm -- --watch=forever' 'build:types -- --watch'","pretest":"esbuild 'test/*.tsx' --bundle --outdir=tmp --define:process.env.NODE_ENV=\\\"test\\\"","test:18":"wet test test/test-react18.html --coverage","test:19":"wet test test/test-react19.html --coverage","build:esm":"esbuild 'src/*' --format=esm --outdir=dist","build:types":"tsc --outDir dist","prepublishOnly":"run-s lint build"},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"repository":{"url":"git+https://github.com/muxinc/ce-la-react.git","type":"git"},"_npmVersion":"10.9.2","description":"Create a React component from a custom element.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"zora":"^6.0.0","react":"^19.0.0","esbuild":"^0.24.0","wet-run":"^1.2.5","react-dom":"^19.0.0","typescript":"^5.7.2","npm-run-all":"^4.1.5","@types/react":"^19.0.1","@biomejs/biome":"^1.9.4","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ce-la-react_0.2.0_1741104452822_0.3282717289562933","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"ce-la-react","version":"0.2.1","author":{"name":"@muxinc"},"license":"BSD-3-Clause","_id":"ce-la-react@0.2.1","maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"homepage":"https://github.com/muxinc/ce-la-react#readme","bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"dist":{"shasum":"ba13dd21b48515d880dc7713755cf32b69e61e73","tarball":"https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.2.1.tgz","fileCount":5,"integrity":"sha512-yJxrUVrH0OTQZs6NmVut0oG1xEqbQjO7ntbo5etGHLdLBzPZn1EdfmkYt4DVWj6pHRCXyfs9RAWG7ym9UD8m9w==","signatures":[{"sig":"MEUCIHzPA1E+hnBsfMn/1SLwb4PxWOFsvOqConcCZ5hh7ZpaAiEAh93Ebe1tL7B70HbVEQVr5+XCA8kvEl+aL0z0vknUqHs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/ce-la-react@0.2.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":19879},"main":"dist/ce-la-react.js","type":"module","types":"dist/ce-la-react.d.ts","gitHead":"08533cb4730082f1b906e8e42a26bf9a1b2cf310","scripts":{"lint":"biome lint src/*","test":"run-s test:*","build":"run-s build:*","watch":"run-p 'build:esm -- --watch=forever' 'build:types -- --watch'","pretest":"esbuild 'test/*.tsx' --bundle --outdir=tmp --define:process.env.NODE_ENV=\\\"test\\\"","test:18":"wet test test/test-react18.html --coverage","test:19":"wet test test/test-react19.html --coverage","build:esm":"esbuild 'src/*' --format=esm --outdir=dist","build:types":"tsc --outDir dist","prepublishOnly":"run-s lint build"},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"repository":{"url":"git+https://github.com/muxinc/ce-la-react.git","type":"git"},"_npmVersion":"10.9.2","description":"Create a React component from a custom element.","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"zora":"^6.0.0","react":"^19.0.0","esbuild":"^0.24.0","wet-run":"^1.2.5","react-dom":"^19.0.0","typescript":"^5.7.2","npm-run-all":"^4.1.5","@types/react":"^19.0.1","@biomejs/biome":"^1.9.4","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ce-la-react_0.2.1_1747361735952_0.5726226730100774","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"ce-la-react","version":"0.3.0","author":{"name":"@muxinc"},"license":"BSD-3-Clause","_id":"ce-la-react@0.3.0","maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"homepage":"https://github.com/muxinc/ce-la-react#readme","bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"dist":{"shasum":"8935d42dfd44963fd3c107c267c93aab3330891a","tarball":"https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.3.0.tgz","fileCount":5,"integrity":"sha512-84SEDLNHaAjykzlkqgKRq95hA3qnxrsTrwh4hTgBq6tfpINqajxz4bkz9q4orhUfpqDPQRgdCzYTF3bHcvTIlQ==","signatures":[{"sig":"MEQCIDcVmTV1r8rxeV1sFeJ4K5iRt8cQuojKSf/uTxZ9zpq7AiBYm1RUEWNzfGLhwtTDkuFhtkqEV35T2ODiiyS/zjAp6Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/ce-la-react@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":20125},"main":"dist/ce-la-react.js","type":"module","types":"dist/ce-la-react.d.ts","gitHead":"afbd653e82fb420898a262124193b2affde4ba26","scripts":{"lint":"biome lint src/*","test":"run-s test:*","build":"run-s build:*","watch":"run-p 'build:esm -- --watch=forever' 'build:types -- --watch'","pretest":"esbuild 'test/*.tsx' --bundle --outdir=tmp --define:process.env.NODE_ENV=\\\"test\\\"","test:18":"wet test test/test-react18.html --coverage","test:19":"wet test test/test-react19.html --coverage","build:esm":"esbuild 'src/*' --format=esm --outdir=dist","build:types":"tsc --outDir dist","prepublishOnly":"run-s lint build"},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"repository":{"url":"git+https://github.com/muxinc/ce-la-react.git","type":"git"},"_npmVersion":"10.9.2","description":"Create a React component from a custom element.","directories":{},"_nodeVersion":"22.15.0","_hasShrinkwrap":false,"devDependencies":{"zora":"^6.0.0","react":"^19.0.0","esbuild":"^0.24.0","wet-run":"^1.2.5","react-dom":"^19.0.0","typescript":"^5.7.2","npm-run-all":"^4.1.5","@types/react":"^19.0.1","@biomejs/biome":"^1.9.4","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ce-la-react_0.3.0_1747680521364_0.6553981125188251","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"ce-la-react","version":"0.3.1","author":{"name":"@muxinc"},"license":"BSD-3-Clause","_id":"ce-la-react@0.3.1","maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"homepage":"https://github.com/muxinc/ce-la-react#readme","bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"dist":{"shasum":"97f24f92317b8a2b654dbf9a29b05c2fcfaa2022","tarball":"https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.3.1.tgz","fileCount":5,"integrity":"sha512-g0YwpZDPIwTwFumGTzNHcgJA6VhFfFCJkSNdUdC04br2UfU+56JDrJrJva3FZ7MToB4NDHAFBiPE/PZdNl1mQA==","signatures":[{"sig":"MEQCIEkWywklZIOGuWE2Wy/Y6NsQybkvcQeAH6OanFAckk0AAiB4U+P/+uAzkzfl657hmoiKNkr/p5wL+n1K2Tf5fqoKJA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/ce-la-react@0.3.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":20151},"main":"dist/ce-la-react.js","type":"module","types":"dist/ce-la-react.d.ts","gitHead":"13b4d3e5cf920ec9fcdfab0c49005cc408e3df9e","scripts":{"lint":"biome lint src/*","test":"run-s test:*","build":"run-s build:*","watch":"run-p 'build:esm -- --watch=forever' 'build:types -- --watch'","pretest":"esbuild 'test/*.tsx' --bundle --outdir=tmp --define:process.env.NODE_ENV=\\\"test\\\"","test:18":"wet test test/test-react18.html --coverage","test:19":"wet test test/test-react19.html --coverage","build:esm":"esbuild 'src/*' --format=esm --outdir=dist","build:types":"tsc --outDir dist","prepublishOnly":"run-s lint build"},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"repository":{"url":"git+https://github.com/muxinc/ce-la-react.git","type":"git"},"_npmVersion":"10.9.2","description":"Create a React component from a custom element.","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"zora":"^6.0.0","react":"^19.0.0","esbuild":"^0.24.0","wet-run":"^1.2.5","react-dom":"^19.0.0","typescript":"^5.7.2","npm-run-all":"^4.1.5","@types/react":"^19.0.1","@biomejs/biome":"^1.9.4","@types/react-dom":"^19.0.2"},"peerDependencies":{"react":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ce-la-react_0.3.1_1754493769942_0.12234971236596448","host":"s3://npm-registry-packages-npm-production"}},"0.3.2":{"name":"ce-la-react","version":"0.3.2","type":"module","description":"Create a React component from a custom element.","author":{"name":"@muxinc"},"license":"BSD-3-Clause","homepage":"https://github.com/muxinc/ce-la-react#readme","bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"repository":{"type":"git","url":"git+https://github.com/muxinc/ce-la-react.git"},"main":"dist/ce-la-react.js","types":"dist/ce-la-react.d.ts","scripts":{"lint":"biome lint src/*","build:esm":"esbuild 'src/*' --format=esm --outdir=dist","build:types":"tsc --outDir dist","build":"run-s build:*","watch":"run-p 'build:esm -- --watch=forever' 'build:types -- --watch'","pretest":"esbuild 'test/*.tsx' --bundle --outdir=tmp --define:process.env.NODE_ENV=\\\"test\\\"","test":"run-s test:*","test:18":"wet test test/test-react18.html --coverage","test:19":"wet test test/test-react19.html --coverage","prepublishOnly":"run-s lint build"},"devDependencies":{"@biomejs/biome":"^1.9.4","@types/react":"^19.0.1","@types/react-dom":"^19.0.2","esbuild":"^0.24.0","npm-run-all":"^4.1.5","react":"^19.0.0","react-dom":"^19.0.0","typescript":"^5.7.2","wet-run":"^1.2.5","zora":"^6.0.0"},"peerDependencies":{"react":">=17.0.0"},"_id":"ce-la-react@0.3.2","gitHead":"e8d1f6c4d7e142cb9be78dbe98839f25e34e5065","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-QJ6k4lOD/btI08xG8jBPxRCGXvCnusGGkTsiXk0u3NqUu/W+BXRnFD4PYjwtqh8AWmGa5LDbGk0fLQsqr0nSMA==","shasum":"66c1454e024c3b9f65ebac05724d0f50756ff057","tarball":"https://registry.npmjs.org/ce-la-react/-/ce-la-react-0.3.2.tgz","fileCount":5,"unpackedSize":20225,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/ce-la-react@0.3.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDHnlsN1HTiQ7xeK6s9dahVfrcEd1PjQ2RLc0k4a/FCIQIgfW5B3NonYvufIZBz5kNh3hPLRE2lBOQ5Bi6DZTPHBvg="}]},"_npmUser":{"name":"luwes","email":"me@wesleyluyten.com"},"directories":{},"maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ce-la-react_0.3.2_1763495823388_0.07611032934284756"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-17T16:42:16.152Z","modified":"2025-11-18T19:57:04.223Z","0.0.0":"2024-12-17T16:42:16.396Z","0.1.0":"2024-12-18T14:52:44.069Z","0.1.1":"2024-12-18T20:55:15.681Z","0.1.2":"2024-12-18T21:09:30.501Z","0.1.3":"2024-12-19T15:24:50.772Z","0.2.0":"2025-03-04T16:07:32.983Z","0.2.1":"2025-05-16T02:15:36.125Z","0.3.0":"2025-05-19T18:48:41.547Z","0.3.1":"2025-08-06T15:22:50.110Z","0.3.2":"2025-11-18T19:57:03.598Z"},"bugs":{"url":"https://github.com/muxinc/ce-la-react/issues"},"author":{"name":"@muxinc"},"license":"BSD-3-Clause","homepage":"https://github.com/muxinc/ce-la-react#readme","repository":{"type":"git","url":"git+https://github.com/muxinc/ce-la-react.git"},"description":"Create a React component from a custom element.","maintainers":[{"name":"luwes","email":"me@wesleyluyten.com"}],"readme":"# ce-la-react\n\nCreate a React component from a custom element with SSR support.\n\nLarge parts of this package are copied from the \n[`@lit/react`](https://github.com/lit/lit/tree/main/packages/react) package. \n\nThe main difference is that this package is more geared towards \nthe use of vanilla custom elements and support SSR in a simpler way.\n\nKey differences are:\n\n- Favor attributes over properties (for primitive values)\n- Configurable conversion functions for properties to attributes\n- Support for custom element templates via a static method `getTemplateHTML`\n\n## `createComponent`\n\nWhile React can render Web Components, it \n[cannot](https://custom-elements-everywhere.com/libraries/react/results/results.html)\neasily pass React props to custom element properties or event listeners.\n\nThis package provides a utility wrapper `createComponent` which makes a\nReact component wrapper for a custom element class. The wrapper correctly\npasses React `props` to properties accepted by the custom element and listens\nfor events dispatched by the custom element.\n\nSince React v19 there is better support for custom elements, but unfortunately\nReact wrappers are still needed for the time being.\n\n## How it works\n\nFor properties, the wrapper inspects the web component class to discover\nits available properties. Next it differentiates from the original `@lit/react`.\n\nThen any React `props` passed with property names are set on the custom element \nas properties if there is no accomponying attribute name listed in \nthe static `observedAttributes` array and if the property is not found in\nthe base class of the custom element. Primitive values are preferred as\nattributes to support SSR (server side rendering).\n\nFor events, `createComponent` accepts a mapping of React event prop names\nto events fired by the custom element. For example passing `{onfoo: 'foo'}`\nmeans a function passed via a `prop` named `onfoo` will be called when the\ncustom element fires the foo event with the event as an argument.\n\n## Usage\n\nImport `React`, a custom element class, and `createComponent`.\n\n```js\nimport * as React from 'react';\nimport { createComponent } from 'ce-la-react';\nimport { MyElement } from './my-element.js';\n\nexport const MyElementComponent = createComponent({\n  tagName: 'my-element',\n  elementClass: MyElement,\n  react: React,\n  events: {\n    onactivate: 'activate',\n    onchange: 'change',\n  },\n});\n```\n\nAfter defining the React component, you can use it just as you would any other\nReact component.\n\n```jsx\n<MyElementComponent\n  active={isActive}\n  onactivate={(e) => (isActive = e.active)}\n/>\n```\n\n## Typescript\n\nEvent callback types can be refined by type casting with `EventName`. The\ntype cast helps `createComponent` correlate typed callbacks to property names in\nthe event property map.\n\nNon-casted event names will fallback to an event type of `Event`.\n\n```ts\nimport * as React from 'react';\nimport { createComponent } from 'ce-la-react';\nimport { MyElement } from './my-element.js';\nimport type { EventName } from 'ce-la-react';\n\nexport const MyElementComponent = createComponent({\n  tagName: 'my-element',\n  elementClass: MyElement,\n  react: React,\n  events: {\n    onClick: 'pointerdown' as EventName<PointerEvent>,\n    onChange: 'input',\n  },\n});\n```\n\nEvent callbacks will match their type cast. In the example below, a\n`PointerEvent` is expected in the `onClick` callback.\n\n```tsx\n<MyElementComponent\n  onClick={(e: PointerEvent) => {\n    console.log('DOM PointerEvent called!');\n  }}\n  onChange={(e: Event) => {\n    console.log(e);\n  }}\n/>\n```\n\nNOTE: This type casting is not associated to any component property. Be\ncareful to use the corresponding type dispatched or bubbled from the\nwebcomponent. Incorrect types might result in additional properties, missing\nproperties, or properties of the wrong type.\n\n## Converting `props` to attributes\n\nFor advanced use cases, the `props` to attributes conversion functions can be customized.\n\n1. `toAttributeName` - A function that converts the prop name to an attribute\n   name. This is useful when the attribute name is a different format than the prop name.\n   e.g. playbackId -> playback-id\n2. `toAttributeValue` - A function that converts the prop value to an attribute\n   value. This could be useful for serializing complex objects to strings.\n\nThe default functions are:\n\n```ts\nexport function defaultToAttributeName(propName: string) {\n  return propName.toLowerCase();\n}\n\nexport function defaultToAttributeValue(propValue: unknown) {\n  if (typeof propValue === 'boolean') return propValue ? '' : undefined;\n  if (typeof propValue === 'function') return undefined;\n  if (typeof propValue === 'object' && propValue !== null) return undefined;\n  return propValue;\n}\n```\n\n## SSR (Server Side Rendering)\n\nThis package supports SSR by rendering the custom element template and setting\nthe React `dangerouslySetInnerHTML` prop with the rendered template. The custom\nelement is then hydrated on the client side.\n\nThe only requirement is that the custom element class must provide a\n`static getTemplateHTML` method that returns the template HTML string. This\nmethod is called with attributes that are converted from the React `props`.\n\n```ts\nimport * as React from 'react';\nimport { createComponent } from 'ce-la-react';\n\nclass MyProfile extends (globalThis.HTMLElement ?? class {}) {\n  static shadowRootOptions = { mode: 'open' };\n\n  static getTemplateHTML(attrs: Record<string, string>) {\n    return `<h1>Hello, ${attrs.firstname}!</h1>`;\n  }\n\n  static get observedAttributes() {\n    return ['firstname'];\n  }\n\n  #isInit = false;\n\n  // This init method might look strange but it is a pattern to avoid\n  // trying to access attributes in the constructor which is illegal!\n  // \n  // Just remember to call this method everywhere before you need to\n  // evaluate anything in the element's shadow DOM. \n  // Could be even in a property getter or setter.\n  #init() {\n    if (this.#isInit) return;\n    this.#isInit = true;\n\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n      this.#render();\n    }\n\n    this.#upgradeProperty('firstName');\n  }\n\n  #render() {\n    if (this.shadowRoot) {\n      this.shadowRoot.innerHTML = MyProfile.getTemplateHTML({\n        ...namedNodeMapToObject(this.attributes),\n      });\n    }\n  }\n\n  // This is a pattern to update property values that are set before \n  // the custom element is upgraded.\n  // https://web.dev/custom-elements-best-practices/#make-properties-lazy\n  #upgradeProperty(this: ElementProps<MyProfile>, prop: string) {\n    if (Object.prototype.hasOwnProperty.call(this, prop)) {\n      const value = this[prop];\n      // Delete the set property from this instance.\n      delete this[prop];\n      // Set the value again via the (prototype) setter on this class.\n      this[prop] = value;\n    }\n  }\n\n  connectedCallback() {\n    this.#init();\n  }\n\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    this.#init();\n\n    if (oldValue === newValue) return;\n\n    if (name === 'firstname') {\n      this.#render();\n    }\n  }\n\n  get firstName() {\n    return this.getAttribute('firstname');\n  }\n\n  set firstName(value) {\n    if (value != null) this.setAttribute('firstname', value);\n    else this.removeAttribute('firstname');\n  }\n}\n\nif (globalThis.customElements && !globalThis.customElements.get('my-profile')) {\n  globalThis.customElements.define('my-profile', MyProfile);\n}\n\nconst MyProfileComponent = createComponent({\n  react: React,\n  tagName: 'my-profile',\n  elementClass: MyProfile,\n});\n```\n","readmeFilename":"README.md"}