Merge pull request #16 from barelyhuman/fix/ts-island

fix: resolution and output fixes for typescript files

Author: barelyhuman

esbuild.js

@@ -28,10 +28,10 @@ function esbuildPlugin(options = defaultOptions) {
     name: 'preact-island-plugin',
     async setup(build) {
       build.onLoad({ filter: /\.(js|ts)x?$/ }, async args => {
-        let isIsland = false
         let generatorOutput
 
         if (args.path.endsWith('.ts') || args.path.endsWith('.tsx')) {
+          let isIsland = false
           const sourceCode = await readFile(args.path, 'utf8')
 
           if (
@@ -46,7 +46,7 @@ function esbuildPlugin(options = defaultOptions) {
             (options && options.esbuild) || {}
           )
 
-          const jsCode = esbuild.transform(sourceCode, {
+          const jsCode = await esbuild.transform(sourceCode, {
             loader: 'tsx',
             platform: 'node',
             target: 'node16',
@@ -57,8 +57,14 @@ function esbuildPlugin(options = defaultOptions) {
             ...esbuildTransformOptions,
           })
 
+          let inputCode = jsCode.code
+
+          if (isIsland) {
+            inputCode = '//@island\n' + inputCode
+          }
+
           generatorOutput = generateIslandsWithSource(
-            (await jsCode).code,
+            inputCode,
             args.path,
             options
           )

lib/plugin.js

@@ -54,11 +54,13 @@ function generateIslandsWithSource(sourceCode, filepath, options) {
   }
 
   clientOutput = resolve(options.client.output, path.basename(filepath))
+  const fileExt = extname(filepath)
 
   if (options.hash) {
     const hash = toHash(sourceCode)
-    const fileExt = extname(filepath)
     clientOutput = clientOutput.replace(fileExt, `-${hash}.js`)
+  } else {
+    clientOutput = clientOutput.replace(fileExt, `.js`)
   }
 
   if (!options.atomic) {

lib/typescript.js

@@ -21,7 +21,7 @@ async function resolveTsConfig(config) {
   if (typeof config == 'string') {
     if (existsSync(resolve(config))) {
       const configDef = await readFile(resolve(config), 'utf8')
-      return configDef
+      return JSON.parse(configDef)
     }
     return {}
   }

package-lock.json

@@ -1,12 +1,22 @@
 // @island
-import type { Signal } from '@preact/signals'
+
+import { signal, type Signal } from '@preact/signals'
 
 type Props = {
   value: Signal<number>
   inc: () => void
 }
 
+const internalCount = signal(0)
+
 export default function CounterTS({ value, inc }: Props) {
   // @ts-ignore no tsconfig in the playgroud
-  return <button onClick={inc}>{value}</button>
+  return (
+    <>
+      <button onClick={inc}>{value}</button>
+      <button onClick={() => (internalCount.value += 1)}>
+        internal:{internalCount}
+      </button>
+    </>
+  )
 }

playground/CounterTS.tsx

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}

playground/tsconfig.json

@@ -39,23 +39,42 @@ function rollupPlugin(options = defaultOptions) {
       const typescript = autoLoadTypescriptPlug()
 
       if (id.endsWith('ts') || id.endsWith('tsx')) {
+        let isIsland = false
+        const baseTransformTSConfig = await resolveTsConfig(options.tsconfig)
         const builder = await rollup.rollup({
           input: id,
           acornInjectPlugins: [jsx()],
           plugins: [
             typescript({
-              ...(await resolveTsConfig(options.client.tsconfig)),
               // Override given tsconfig's jsx property
               // for the client source since, it is the expected
               // input for the plugin
               // and modified by the plugin
-              jsx: 'preserve',
+              ...baseTransformTSConfig,
+              compilerOptions: {
+                ...baseTransformTSConfig.compilerOptions,
+                jsx: 'preserve',
+              },
             }),
           ],
         })
         const build = await builder.generate({})
         const sourceCode = build.output[0].code
-        generatedOutput = generateIslandsWithSource(sourceCode, id, options)
+
+        if (
+          sourceCode.indexOf('//@island') > -1 ||
+          sourceCode.indexOf('// @island') > -1
+        ) {
+          isIsland = true
+        }
+
+        let inputCode = sourceCode
+
+        if (isIsland) {
+          inputCode = '//@island\n' + inputCode
+        }
+
+        generatedOutput = generateIslandsWithSource(inputCode, id, options)
       } else {
         generatedOutput = generateIslands(id, options)
       }