feat: add replaceParentNode

selectively decide if the parent node needs to be replaced in preact

Author: barelyhuman

esbuild.js

@@ -8,6 +8,7 @@ const { defu } = require('defu')
 
 exports = module.exports = esbuildPlugin
 
+/**@type {import("../lib/types").ESbuildOptions} */
 const defaultOptions = {
   rootDir: '.',
   baseURL: '/public',
@@ -17,6 +18,7 @@ const defaultOptions = {
   client: {
     tsconfig: './tsconfig.json',
     output: './dist/client',
+    replaceParentNode: false,
   },
 }
 

lib/plugin.js

@@ -43,9 +43,13 @@ function generateIslandsWithSource(sourceCode, filepath, options) {
   }
   const baseURL = options.baseURL || '/'
 
-  let isIsland = hasTopLevelComment(sourceCode)
-  const ast = astFromCode(sourceCode)
+  let isIsland = /.island.(js|ts)x?$/.test(filepath)
 
+  if (!isIsland) {
+    isIsland = hasTopLevelComment(sourceCode)
+  }
+
+  const ast = astFromCode(sourceCode)
   if (!isIsland) {
     isIsland = staticAnalyseIfIsland(ast)
   }
@@ -87,6 +91,7 @@ function generateIslandsWithSource(sourceCode, filepath, options) {
 
   const clientCode = constructIslandClient(componentName, filepath, {
     viewMods: viewModifier,
+    replaceParentNode: options.client.replaceParentNode,
   })
   const serverCode = constructIslandServer(ast, componentName, {
     baseURL,
@@ -123,7 +128,11 @@ function getIslandName(name) {
   return `island${name.replace(/([A-Z])/g, '-$1').toLowerCase()}`
 }
 
-function constructIslandClient(name, importPath, { viewMods } = {}) {
+function constructIslandClient(
+  name,
+  importPath,
+  { viewMods, replaceParentNode = false } = {}
+) {
   const islandName = getIslandName(name)
 
   return `
@@ -170,7 +179,9 @@ customElements.define("${islandName}", class Island${name} extends HTMLElement {
 
   renderIsland(){
     mergePropsWithDOM(this, this.baseProps);
-    render(restoreTree(this.component.default, this.baseProps), this, this)
+    render(restoreTree(this.component.default, this.baseProps), this,${
+      replaceParentNode ? 'this' : 'undefined'
+    } )
   }
 })`
 }

lib/types.d.ts

@@ -18,6 +18,7 @@ export interface Options {
   hash?: boolean
   tsconfig: string | TSConfig
   client: {
+    replaceParentNode: boolean
     tsconfig?: string | TSConfig
     output: string
   }

rollup.js

@@ -13,13 +13,15 @@ const { defu } = require('defu')
 
 exports = module.exports = rollupPlugin
 
+/**@type {import("../lib/types").Options} */
 const defaultOptions = {
   rootDir: '.',
   baseURL: '/public',
   atomic: true,
   hash: false,
   tsconfig: './tsconfig.json',
   client: {
+    replaceParentNode: false,
     tsconfig: './tsconfig.json',
     output: './dist/client',
   },