test: add test for server directives (#627)

examples/server-actions/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "server-actions-example",
+  "type": "module",
+  "exports": {
+    "./inline": "./dist/inline.js",
+    "./client": "./dist/client.js"
+  },
+  "devDependencies": {
+    "@types/react": "*"
+  },
+  "dependencies": {
+    "react": "*"
+  }
+}

examples/server-actions/src/action.ts

@@ -0,0 +1,5 @@
+'use server'
+
+export async function action1() {
+  return 'action1'
+}

examples/server-actions/src/client.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { action1 } from './action'
+
+export default function Page() {
+  return <button onClick={action1}>Action 1</button>
+}

examples/server-actions/src/inline.tsx

@@ -0,0 +1,11 @@
+// @ts-ignore externals
+import ClientComponent from 'client-component'
+
+export default function Page() {
+  async function inlineAction() {
+    'use server'
+    return 'inline-action'
+  }
+
+  return <ClientComponent action={inlineAction} />
+}

examples/server-actions/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "ES2022"
+  }
+}

test/integration/mixed-directives/.gitignore

@@ -0,0 +1 @@
+!tsconfig.json

test/integration/mixed-directives/__snapshots__/mixed-directives.test.ts.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`integration - mixed-directives should work with js only project 1`] = `
+{
+  "action-server-DOTFC6td.js": "'use server';
+async function action1() {
+    return 'action1';
+}
+
+export { action1 as a };
+",
+  "client.js": "'use client';
+import { jsx } from 'react/jsx-runtime';
+import { a as action1 } from './action-server-DOTFC6td.js';
+
+function Page() {
+    return /*#__PURE__*/ jsx("button", {
+        onClick: action1,
+        children: "Action 1"
+    });
+}
+
+export { Page as default };
+",
+  "inline.js": "import { jsx } from 'react/jsx-runtime';
+import ClientComponent from 'client-component';
+
+// @ts-ignore externals
+function Page() {
+    async function inlineAction() {
+        'use server';
+        return 'inline-action';
+    }
+    return /*#__PURE__*/ jsx(ClientComponent, {
+        action: inlineAction
+    });
+}
+
+export { Page as default };
+",
+}
+`;

test/integration/mixed-directives/mixed-directives.test.ts

@@ -0,0 +1,25 @@
+import { readFileSync } from 'fs'
+import { createIntegrationTest, getFileNamesFromDirectory } from '../utils'
+
+describe('integration - mixed-directives', () => {
+  it('should work with js only project', async () => {
+    await createIntegrationTest(
+      {
+        directory: __dirname,
+      },
+      async ({ distDir }) => {
+        const distFiles = await getFileNamesFromDirectory(distDir)
+        const fileContents = distFiles
+          .map((file) => [file, readFileSync(`${distDir}/${file}`, 'utf-8')])
+          .reduce((acc, pair) => {
+            return {
+              ...acc,
+              [pair[0]]: pair[1],
+            }
+          }, {})
+
+        expect(fileContents).toMatchSnapshot(``)
+      },
+    )
+  })
+})

test/integration/mixed-directives/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "mixed-directives",
+  "type": "module",
+  "exports": {
+    "./inline": "./dist/inline.js",
+    "./client": "./dist/client.js"
+  },
+  "dependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

test/integration/mixed-directives/src/action.ts

@@ -0,0 +1,5 @@
+'use server'
+
+export async function action1() {
+  return 'action1'
+}

test/integration/mixed-directives/src/client.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { action1 } from './action'
+
+export default function Page() {
+  return <button onClick={action1}>Action 1</button>
+}

test/integration/mixed-directives/src/inline.tsx

@@ -0,0 +1,11 @@
+// @ts-ignore externals
+import ClientComponent from 'client-component'
+
+export default function Page() {
+  async function inlineAction() {
+    'use server'
+    return 'inline-action'
+  }
+
+  return <ClientComponent action={inlineAction} />
+}

test/integration/mixed-directives/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "ES2022"
+  }
+}