Merge pull request #21 from dumlj/fix/windows

Fix/windows

Author: DavidKk

.eslintrc.js

@@ -40,11 +40,11 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['**/*.ts'],
+      files: ['**/*.ts', '**/*.tsx'],
       extends: ['./public/eslintrc/ts.js'],
     },
     {
-      files: ['**/*.js'],
+      files: ['**/*.js', '**/*.jsx'],
       extends: ['./public/eslintrc/cjs.js'],
     },
     {

.lintstagedrc.cjs

@@ -1,5 +1,5 @@
 module.exports = {
-  '**/*.{js,jsx,ts,tsx,d.tsx,md,yml,yaml,json,css,less,scss,sass,html,ejs,hbs}': (files) => {
+  '**/*.{js,jsx,ts,tsx,d.ts,md,yml,yaml,json,css,less,scss,sass,html,ejs,hbs}': (files) => {
     return ['prettier', '--config .prettierrc.js', '--write', ...files].join(' ')
   },
   '**/*.{ts,tsx,d.ts}': async (files) => {

@next-plugin/next-auto-dynamic/README.md

@@ -52,6 +52,8 @@ module.exports = withDynamicClient(nextConfig)
 
 ## LIVE DEMO
 
+You can view static file loading by refreshing the page and opening the console.
+
 <dumlj-stackblitz height="47vw" src="@dumlj-example/next-auto-dynamic"></dumlj-stackblitz>
 
 ## INTERNAL DEPENDENCIES

@next-plugin/next-auto-dynamic/__example__/app/layout.tsx

@@ -1,3 +1,5 @@
+import '@/style.css'
+
 export interface LayoutProps {
   children: React.ReactNode
 }

@next-plugin/next-auto-dynamic/__example__/app/page.tsx

@@ -1,9 +1,5 @@
 import SSR from '../components/SSR'
 
 export default function Index() {
-  return (
-    <div>
-      Hello World <SSR />
-    </div>
-  )
+  return <SSR />
 }

@next-plugin/next-auto-dynamic/__example__/components/SSR.tsx

@@ -1,11 +1,13 @@
 import A from '../snippets/A'
 import B from '@/snippets/B'
+import C from '../snippets/C'
 
 export default async function SSR() {
   return (
     <>
       <A />
       <B />
+      <C />
     </>
   )
 }

@next-plugin/next-auto-dynamic/__example__/next.config.js

@@ -3,6 +3,7 @@
 const { nextDynamicClient } = require('@dumlj/next-auto-dynamic')
 const withDynamicClient = nextDynamicClient({
   src: './snippets',
+  exclude: ['C.tsx'],
 })
 
 /** @type {import('next').NextConfig} */

@next-plugin/next-auto-dynamic/__example__/package.json

@@ -11,6 +11,7 @@
     "next": "latest"
   },
   "devDependencies": {
+    "@types/react": "latest",
     "@dumlj/next-auto-dynamic": "workspace:*"
   }
 }

@next-plugin/next-auto-dynamic/__example__/snippets/A.tsx

@@ -1,5 +1,27 @@
 'use client'
 
+import { useEffect, useState } from 'react'
+
 export default function A() {
-  return <div>A</div>
+  const [moduleId, setModuleId] = useState<string>()
+  const [parents, setParents] = useState<string[]>()
+
+  useEffect(() => {
+    setModuleId(__webpack_module__.id)
+    setParents(__webpack_module__.parents)
+  }, [])
+
+  return (
+    <section>
+      <h2>
+        A <span>{moduleId}</span>
+      </h2>
+      <p>Import "./A"</p>
+      <pre>
+        Parents:
+        <br />
+        {JSON.stringify(parents, null, 2)}
+      </pre>
+    </section>
+  )
 }

@next-plugin/next-auto-dynamic/__example__/snippets/B.tsx

@@ -1,5 +1,27 @@
 'use client'
 
+import { useEffect, useState } from 'react'
+
 export default function B() {
-  return <div>B</div>
+  const [moduleId, setModuleId] = useState<string>()
+  const [parents, setParents] = useState<string[]>()
+
+  useEffect(() => {
+    setModuleId(__webpack_module__.id)
+    setParents(__webpack_module__.parents)
+  }, [])
+
+  return (
+    <section>
+      <h2>
+        B <span>{moduleId}</span>
+      </h2>
+      <p>Import "@/B"</p>
+      <pre>
+        Parents:
+        <br />
+        {JSON.stringify(parents, null, 2)}
+      </pre>
+    </section>
+  )
 }

@next-plugin/next-auto-dynamic/__example__/snippets/C.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export default function C() {
+  const [moduleId, setModuleId] = useState<string>()
+  const [parents, setParents] = useState<string[]>()
+
+  useEffect(() => {
+    setModuleId(__webpack_module__.id)
+    setParents(__webpack_module__.parents)
+  }, [])
+
+  return (
+    <section>
+      <h2>
+        C <span>{moduleId}</span>
+      </h2>
+      <p>No automatic dynamic import by exclude option of plugin.</p>
+      <pre>
+        Parents:
+        <br />
+        {JSON.stringify(parents, null, 2)}
+      </pre>
+    </section>
+  )
+}

@next-plugin/next-auto-dynamic/__example__/style.css

@@ -0,0 +1,43 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+h2 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+h2 > span {
+  margin-left: 10px;
+  font-weight: normal;
+}
+
+p {
+  margin-bottom: 10px;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  margin: 20px;
+  padding: 20px;
+  border: 1px solid #999;
+  border-radius: 10px;
+  box-shadow: 0px 1px 4px #ccc;
+}
+
+pre {
+  line-height: 1.8;
+  word-break: keep-all;
+  white-space: break-spaces;
+}

@next-plugin/next-auto-dynamic/__example__/typings.d.ts

@@ -0,0 +1,4 @@
+declare const __webpack_module__: {
+  id: string
+  parents: string[]
+}

@next-plugin/next-auto-dynamic/__readme__/DEMO.md

@@ -1,3 +1,5 @@
 ## LIVE DEMO
 
+You can view static file loading by refreshing the page and opening the console.
+
 <dumlj-stackblitz height="47vw" src="@dumlj-example/next-auto-dynamic"></dumlj-stackblitz>