create-outsystems-astro 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/README.md +50 -11
  2. package/bin/cli.js +66 -5
  3. package/package.json +1 -1
  4. package/template/AGENTS.md +91 -4
  5. package/template/astro.config.mjs +14 -3
  6. package/template/bun.lock +202 -96
  7. package/template/deno.json +16 -1
  8. package/template/deno.lock +571 -309
  9. package/template/eslint.config.mjs +27 -2
  10. package/template/package-lock.json +760 -258
  11. package/template/package.json +38 -29
  12. package/template/patches/{@angular+build+21.2.0.patch → @angular+build+21.2.1.patch} +1 -10
  13. package/template/patches-deno/playwright+1.58.2.patch +26 -0
  14. package/template/playwright.config.ts +1 -1
  15. package/template/pnpm-lock.yaml +984 -599
  16. package/template/src/framework/angular/{Counter.component.ts → Demo.component.ts} +12 -5
  17. package/template/src/framework/angular/Store.component.ts +24 -0
  18. package/template/src/framework/preact/Demo.tsx +86 -0
  19. package/template/src/framework/preact/Store.tsx +31 -0
  20. package/template/src/framework/react/{Counter.tsx → Demo.tsx} +23 -17
  21. package/template/src/framework/react/Store.tsx +31 -0
  22. package/template/src/framework/svelte/{Counter.svelte → Demo.svelte} +8 -11
  23. package/template/src/framework/svelte/Store.svelte +22 -0
  24. package/template/src/framework/vue/{Counter.vue → Demo.vue} +7 -9
  25. package/template/src/framework/vue/Store.vue +28 -0
  26. package/template/src/images/angular.png +0 -0
  27. package/template/src/images/preact.png +0 -0
  28. package/template/src/images/react.png +0 -0
  29. package/template/src/images/svelte.png +0 -0
  30. package/template/src/images/vue.png +0 -0
  31. package/template/src/pages/angular/{angular-counter.astro → angular-demo.astro} +12 -5
  32. package/template/src/pages/multi/store.astro +22 -0
  33. package/template/src/pages/preact/preact-demo.astro +66 -0
  34. package/template/src/pages/react/{react-counter.astro → react-demo.astro} +12 -9
  35. package/template/src/pages/svelte/{svelte-counter.astro → svelte-demo.astro} +9 -9
  36. package/template/src/pages/vue/{vue-counter.astro → vue-demo.astro} +9 -15
  37. package/template/src/stores/framework.ts +10 -0
  38. package/template/src/styles/index.css +4 -0
  39. package/template/test/e2e/angular/angular-counter.spec.ts +7 -1
  40. package/template/test/e2e/preact/preact-counter.spec.ts +42 -0
  41. package/template/test/e2e/react/react-counter.spec.ts +2 -2
  42. package/template/test/e2e/svelte/svelte-counter.spec.ts +2 -2
  43. package/template/test/e2e/vue/vue-counter.spec.ts +2 -2
  44. package/template/test/integration/angular/{Counter.component.spec.ts → Demo.component.spec.ts} +6 -6
  45. package/template/test/integration/preact/Demo.test.tsx +84 -0
  46. package/template/test/integration/react/{Counter.test.tsx → Demo.test.tsx} +10 -9
  47. package/template/test/integration/svelte/{Counter.test.ts → Demo.test.ts} +9 -9
  48. package/template/test/integration/svelte/{SlotCounter.wrapper.svelte → Demo.wrapper.svelte} +3 -3
  49. package/template/test/integration/vue/{Counter.test.ts → Demo.test.ts} +9 -9
  50. package/template/tsconfig.json +0 -1
  51. package/template/vitest.config.ts +12 -0
  52. package/template/yarn.lock +572 -234
  53. /package/template/patches/{@analogjs+astro-angular+2.3.0.patch → @analogjs+astro-angular+2.3.1.patch} +0 -0
package/template/src/pages/svelte/{svelte-counter.astro → svelte-demo.astro} RENAMED
@@ -1,5 +1,5 @@
1
1
  ---
2
- import CounterComponent from "../../framework/svelte/Counter.svelte";
2
+ import DemoComponent from "../../framework/svelte/Demo.svelte";
3
3
  import styles from "../../styles/index.css?url";
4
4
  const initialCount = 5;
5
5
  const showMessage = "showMessage";
@@ -21,18 +21,18 @@ const showMessage = "showMessage";
21
21
  </script>
22
22
  </head>
23
23
  <body>
24
- <div class="counter-title">HTML Content</div>
24
+ <div class="counter-title">Astro Page</div>
25
25
  <div class="card-grid">
26
26
  <div class="card">
27
- Value sent back from component.
27
+ <strong>Counter component</strong>
28
28
  <div class="card-content">
29
29
  <div style="text-align: center; margin-top: 30px;">
30
- Counter value sent back: <br /><span id="counter"></span>
30
+ Counter value: <br /><span id="counter"></span>
31
31
  </div>
32
32
  </div>
33
33
  </div>
34
34
  <div class="card">
35
- Update Nano Store value
35
+ <strong>Nano Stores</strong>
36
36
  <div class="card-content">
37
37
  <div style="text-align: center; margin-top: 30px;">
38
38
  <input
@@ -49,15 +49,15 @@ const showMessage = "showMessage";
49
49
  </div>
50
50
  </div>
51
51
  <hr />
52
- <CounterComponent
52
+ <DemoComponent
53
53
  client:only="svelte"
54
54
  initialCount={initialCount}
55
55
  showMessage={showMessage}
56
56
  >
57
- <div class="counter-title" slot="header">Counter Component</div>
57
+ <div class="counter-title" slot="header">Svelte Demo Component</div>
58
58
  <div style="text-align: center;">
59
- <p><strong>This is content passed into the component.</strong></p>
59
+ <p><em>This is content passed into the component.</em></p>
60
60
  </div>
61
- </CounterComponent>
61
+ </DemoComponent>
62
62
  </body>
63
63
  </html>
package/template/src/pages/vue/{vue-counter.astro → vue-demo.astro} RENAMED
@@ -1,5 +1,5 @@
1
1
  ---
2
- import CounterComponent from '../../framework/vue/Counter.vue';
2
+ import DemoComponent from '../../framework/vue/Demo.vue';
3
3
  import styles from "../../styles/index.css?url";
4
4
  const initialCount = 5;
5
5
  const showMessage = "showMessage";
@@ -21,18 +21,18 @@ const showMessage = "showMessage";
21
21
  </script>
22
22
  </head>
23
23
  <body>
24
- <div class="counter-title">HTML Content</div>
24
+ <div class="counter-title">Astro Page</div>
25
25
  <div class="card-grid">
26
26
  <div class="card">
27
- Value sent back from component.
27
+ <strong>Counter component</strong>
28
28
  <div class="card-content">
29
29
  <div style="text-align: center; margin-top: 30px;">
30
- Counter value sent back: <br /><span id="counter"></span>
30
+ Counter value: <br /><span id="counter"></span>
31
31
  </div>
32
32
  </div>
33
33
  </div>
34
34
  <div class="card">
35
- Update Nano Store value
35
+ <strong>Nano Stores</strong>
36
36
  <div class="card-content">
37
37
  <div style="text-align: center; margin-top: 30px;">
38
38
  <input
@@ -49,19 +49,13 @@ const showMessage = "showMessage";
49
49
  </div>
50
50
  </div>
51
51
  <hr />
52
- <link href={styles} rel="stylesheet" />
53
- <script is:inline>
54
- window.showMessage = (count) => {
55
- document.getElementById("counter").textContent = count;
56
- };
57
- </script>
58
- <CounterComponent client:only="vue" initialCount={initialCount} showMessage={showMessage}>
52
+ <DemoComponent client:only="vue" initialCount={initialCount} showMessage={showMessage}>
59
53
  <div class="counter-title" slot="header">
60
- Counter Component
54
+ Vue Demo Component
61
55
  </div>
62
56
  <div style="text-align: center;">
63
- <p>This is content passed into the component.</p>
57
+ <p><em>This is content passed into the component.</em></p>
64
58
  </div>
65
- </CounterComponent>
59
+ </DemoComponent>
66
60
  </body>
67
61
  </html>
package/template/src/stores/framework.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { atom } from "nanostores";
2
+
3
+ export type CurrentSelectedFramework =
4
+ | ""
5
+ | "Preact"
6
+ | "React"
7
+ | "Svelte"
8
+ | "Vue";
9
+
10
+ export const framework = atom<CurrentSelectedFramework>("");
package/template/src/styles/index.css CHANGED
@@ -40,6 +40,10 @@
40
40
  padding: 10px;
41
41
  }
42
42
 
43
+ .unused {
44
+ background-color: lightgray;
45
+ }
46
+
43
47
  /* On mouse-over, add a deeper shadow */
44
48
  .card:hover {
45
49
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
package/template/test/e2e/angular/angular-counter.spec.ts CHANGED
@@ -1,12 +1,18 @@
1
1
  import { expect, test } from "@playwright/test";
2
2
 
3
3
  test.beforeEach(async ({ page }) => {
4
- await page.goto("/angular/angular-counter");
4
+ await page.goto("/angular/angular-demo");
5
5
  // Angular sometimes needs a bit more time to fully render the island component.
6
6
  // eslint-disable-next-line playwright/no-wait-for-timeout
7
7
  await page.waitForTimeout(2000);
8
8
  });
9
9
 
10
+ test.describe("Has values", () => {
11
+ test("Should have header", async ({ page }) => {
12
+ await expect(page.getByText("Angular Demo Component")).toBeVisible();
13
+ });
14
+ });
15
+
10
16
  test.describe("Change counter", () => {
11
17
  test("Should increment counter when clicking + button", async ({ page }) => {
12
18
  await page.getByRole("button", { name: "+" }).click();
package/template/test/e2e/preact/preact-counter.spec.ts ADDED
@@ -0,0 +1,42 @@
1
+ import { expect, test } from "@playwright/test";
2
+
3
+ test.beforeEach(async ({ page }) => {
4
+ await page.goto("/preact/preact-demo");
5
+ });
6
+
7
+ test.describe("Has values", () => {
8
+ test("Should have header", async ({ page }) => {
9
+ await expect(page.getByText("Preact Demo Component")).toBeVisible();
10
+ });
11
+
12
+ test("Should have slot content", async ({ page }) => {
13
+ await expect(
14
+ page.getByText("This is content passed into the component"),
15
+ ).toBeVisible();
16
+ });
17
+ });
18
+
19
+ test.describe("Change counter", () => {
20
+ test("Should increment counter when clicking + button", async ({ page }) => {
21
+ await page.getByRole("button", { name: "+" }).click();
22
+ await expect(page.locator("pre")).toContainText("6");
23
+ });
24
+
25
+ test("Should decrement counter when clicking - button", async ({ page }) => {
26
+ await page.getByRole("button", { name: "-" }).click();
27
+ await expect(page.locator("pre")).toContainText("4");
28
+ });
29
+
30
+ test("Should show message on Send value", async ({ page }) => {
31
+ await page.getByRole("button", { name: "Send value" }).click();
32
+ await expect(page.locator("span#counter")).toContainText("5");
33
+ });
34
+ });
35
+
36
+ test.describe("Update Nano Store", () => {
37
+ test("Should update Nano Store", async ({ page }) => {
38
+ await page.locator("#store").fill("Updated Value");
39
+ await page.getByRole("button", { name: "Update Store" }).click();
40
+ await expect(page.locator("#nanostore")).toHaveText("Updated Value");
41
+ });
42
+ });
package/template/test/e2e/react/react-counter.spec.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import { expect, test } from "@playwright/test";
2
2
 
3
3
  test.beforeEach(async ({ page }) => {
4
- await page.goto("/react/react-counter");
4
+ await page.goto("/react/react-demo");
5
5
  });
6
6
 
7
7
  test.describe("Has values", () => {
8
8
  test("Should have header", async ({ page }) => {
9
- await expect(page.getByText("Counter Component")).toBeVisible();
9
+ await expect(page.getByText("React Demo Component")).toBeVisible();
10
10
  });
11
11
 
12
12
  test("Should have slot content", async ({ page }) => {
package/template/test/e2e/svelte/svelte-counter.spec.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import { expect, test } from "@playwright/test";
2
2
 
3
3
  test.beforeEach(async ({ page }) => {
4
- await page.goto("/svelte/svelte-counter");
4
+ await page.goto("/svelte/svelte-demo");
5
5
  });
6
6
 
7
7
  test.describe("Has values", () => {
8
8
  test("Should have header", async ({ page }) => {
9
- await expect(page.getByText("Counter Component")).toBeVisible();
9
+ await expect(page.getByText("Svelte Demo Component")).toBeVisible();
10
10
  });
11
11
 
12
12
  test("Should have slot content", async ({ page }) => {
package/template/test/e2e/vue/vue-counter.spec.ts CHANGED
@@ -1,12 +1,12 @@
1
1
  import { expect, test } from "@playwright/test";
2
2
 
3
3
  test.beforeEach(async ({ page }) => {
4
- await page.goto("/vue/vue-counter");
4
+ await page.goto("/vue/vue-demo");
5
5
  });
6
6
 
7
7
  test.describe("Has values", () => {
8
8
  test("Should have header", async ({ page }) => {
9
- await expect(page.getByText("Counter Component")).toBeVisible();
9
+ await expect(page.getByText("Vue Demo Component")).toBeVisible();
10
10
  });
11
11
 
12
12
  test("Should have slot content", async ({ page }) => {
package/template/test/integration/angular/{Counter.component.spec.ts → Demo.component.spec.ts} RENAMED
@@ -1,10 +1,10 @@
1
1
  import { fireEvent, render, screen } from "@testing-library/angular";
2
2
  import { it, vi } from "vitest";
3
- import CounterComponent from "../../../src/framework/angular/Counter.component";
3
+ import DemoComponent from "../../../src/framework/angular/Demo.component";
4
4
 
5
- describe("CounterComponent (Testing Library)", () => {
5
+ describe("DemoComponent (Testing Library)", () => {
6
6
  it("should render the initial count", async () => {
7
- await render(CounterComponent, {
7
+ await render(DemoComponent, {
8
8
  componentInputs: { initialCount: 5 },
9
9
  });
10
10
 
@@ -13,7 +13,7 @@ describe("CounterComponent (Testing Library)", () => {
13
13
  });
14
14
 
15
15
  it("should increment the count when add button is clicked", async () => {
16
- await render(CounterComponent, {
16
+ await render(DemoComponent, {
17
17
  componentInputs: { initialCount: 5 },
18
18
  });
19
19
 
@@ -24,7 +24,7 @@ describe("CounterComponent (Testing Library)", () => {
24
24
  });
25
25
 
26
26
  it("should decrement the count when add button is clicked", async () => {
27
- await render(CounterComponent, {
27
+ await render(DemoComponent, {
28
28
  componentInputs: { initialCount: 5 },
29
29
  });
30
30
 
@@ -35,7 +35,7 @@ describe("CounterComponent (Testing Library)", () => {
35
35
  });
36
36
 
37
37
  it('should call the showParentMessage function when "Send value" button is clicked', async () => {
38
- const { fixture } = await render(CounterComponent, {
38
+ const { fixture } = await render(DemoComponent, {
39
39
  componentInputs: { initialCount: 5 },
40
40
  });
41
41
 
package/template/test/integration/preact/Demo.test.tsx ADDED
@@ -0,0 +1,84 @@
1
+ /** @jsxImportSource preact */
2
+ import { act, fireEvent, render, screen } from "@testing-library/preact";
3
+ import { it, vi } from "vitest";
4
+
5
+ import Demo from "../../../src/framework/preact/Demo";
6
+
7
+ describe("Demo", () => {
8
+ const defaultProps = {
9
+ children: <div>Test Children</div>,
10
+ header: <h1>Test Header</h1>,
11
+ initialCount: 5,
12
+ showMessage: "mockFunction",
13
+ };
14
+
15
+ let capturedListener: ((val: string) => void) | undefined;
16
+ let storeValue = "Mocked Nano Value";
17
+
18
+ beforeEach(() => {
19
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
20
+ (window as any).mockFunction = vi.fn();
21
+
22
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
23
+ (window as any).Stores = {
24
+ preactStore: {
25
+ get: vi.fn(() => storeValue),
26
+ listen: vi.fn((callback) => {
27
+ capturedListener = callback;
28
+ callback(storeValue);
29
+ return () => {};
30
+ }),
31
+ },
32
+ };
33
+ });
34
+
35
+ afterEach(() => {
36
+ vi.clearAllMocks();
37
+ capturedListener = undefined;
38
+ storeValue = "Mocked Nano Value";
39
+ });
40
+
41
+ it("renders the initial count", () => {
42
+ render(<Demo {...defaultProps} />);
43
+ expect(screen.getByText("5")).toBeInTheDocument();
44
+ });
45
+
46
+ it("renders header", () => {
47
+ render(<Demo {...defaultProps} />);
48
+ expect(screen.getByText("Test Header")).toBeInTheDocument();
49
+ });
50
+
51
+ it("renders children", () => {
52
+ render(<Demo {...defaultProps} />);
53
+ expect(screen.getByText("Test Children")).toBeInTheDocument();
54
+ });
55
+
56
+ it("increments count when add button is clicked", () => {
57
+ render(<Demo {...defaultProps} />);
58
+ fireEvent.click(screen.getByRole("button", { name: "+" }));
59
+ expect(screen.getByText("6")).toBeInTheDocument();
60
+ });
61
+
62
+ it("decrements count when subtract button is clicked", () => {
63
+ render(<Demo {...defaultProps} />);
64
+ fireEvent.click(screen.getByRole("button", { name: "-" }));
65
+ expect(screen.getByText("4")).toBeInTheDocument();
66
+ });
67
+
68
+ it("calls the show message function", () => {
69
+ render(<Demo {...defaultProps} />);
70
+ fireEvent.click(screen.getByRole("button", { name: "Send value" }));
71
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
72
+ expect((window as any).mockFunction).toHaveBeenCalledWith(5);
73
+ });
74
+
75
+ it("updates the component when the nanostore value changes", async () => {
76
+ render(<Demo {...defaultProps} />);
77
+ expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
78
+ await act(async () => {
79
+ storeValue = "Updated Nano Value";
80
+ capturedListener?.("Updated Nano Value");
81
+ });
82
+ expect(await screen.findByText(/Updated Nano Value/i)).toBeInTheDocument();
83
+ });
84
+ });
package/template/test/integration/react/{Counter.test.tsx → Demo.test.tsx} RENAMED
@@ -1,9 +1,10 @@
1
+ /** @jsxImportSource react */
1
2
  import { act, fireEvent, render, screen } from "@testing-library/react";
2
3
  import { it, vi } from "vitest";
3
4
 
4
- import Counter from "../../../src/framework/react/Counter";
5
+ import Demo from "../../../src/framework/react/Demo";
5
6
 
6
- describe("Counter", () => {
7
+ describe("Demo", () => {
7
8
  const defaultProps = {
8
9
  children: <div>Test Children</div>,
9
10
  header: <h1>Test Header</h1>,
@@ -38,41 +39,41 @@ describe("Counter", () => {
38
39
  });
39
40
 
40
41
  it("renders the initial count", () => {
41
- render(<Counter {...defaultProps} />);
42
+ render(<Demo {...defaultProps} />);
42
43
  expect(screen.getByText("5")).toBeInTheDocument();
43
44
  });
44
45
 
45
46
  it("renders header", () => {
46
- render(<Counter {...defaultProps} />);
47
+ render(<Demo {...defaultProps} />);
47
48
  expect(screen.getByText("Test Header")).toBeInTheDocument();
48
49
  });
49
50
 
50
51
  it("renders children", () => {
51
- render(<Counter {...defaultProps} />);
52
+ render(<Demo {...defaultProps} />);
52
53
  expect(screen.getByText("Test Children")).toBeInTheDocument();
53
54
  });
54
55
 
55
56
  it("increments count when add button is clicked", () => {
56
- render(<Counter {...defaultProps} />);
57
+ render(<Demo {...defaultProps} />);
57
58
  fireEvent.click(screen.getByRole("button", { name: "+" }));
58
59
  expect(screen.getByText("6")).toBeInTheDocument();
59
60
  });
60
61
 
61
62
  it("decrements count when subtract button is clicked", () => {
62
- render(<Counter {...defaultProps} />);
63
+ render(<Demo {...defaultProps} />);
63
64
  fireEvent.click(screen.getByRole("button", { name: "-" }));
64
65
  expect(screen.getByText("4")).toBeInTheDocument();
65
66
  });
66
67
 
67
68
  it("calls the show message function", () => {
68
- render(<Counter {...defaultProps} />);
69
+ render(<Demo {...defaultProps} />);
69
70
  fireEvent.click(screen.getByRole("button", { name: "Send value" }));
70
71
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
71
72
  expect((window as any).mockFunction).toHaveBeenCalledWith(5);
72
73
  });
73
74
 
74
75
  it("updates the component when the nanostore value changes", async () => {
75
- render(<Counter {...defaultProps} />);
76
+ render(<Demo {...defaultProps} />);
76
77
  expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
77
78
  await act(async () => {
78
79
  storeValue = "Updated Nano Value";
package/template/test/integration/svelte/{Counter.test.ts → Demo.test.ts} RENAMED
@@ -1,10 +1,10 @@
1
1
  import { act, fireEvent, render, screen } from "@testing-library/svelte";
2
2
  import { writable } from "svelte/store";
3
3
  import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
4
- import Counter from "../../../src/framework/svelte/Counter.svelte";
5
- import SlotCounter from "./SlotCounter.wrapper.svelte";
4
+ import Demo from "../../../src/framework/svelte/Demo.svelte";
5
+ import DemoWrapper from "./Demo.wrapper.svelte";
6
6
 
7
- describe("Counter.svelte", () => {
7
+ describe("Demo", () => {
8
8
  const defaultProps = {
9
9
  initialCount: 5,
10
10
  showMessage: "mockFunction",
@@ -30,19 +30,19 @@ describe("Counter.svelte", () => {
30
30
  });
31
31
 
32
32
  it("renders the initial count", () => {
33
- render(Counter, { props: defaultProps });
33
+ render(Demo, { props: defaultProps });
34
34
  expect(screen.getByText("5")).toBeInTheDocument();
35
35
  });
36
36
 
37
37
  it("renders slots (header and default)", () => {
38
- render(SlotCounter);
38
+ render(DemoWrapper);
39
39
 
40
40
  expect(screen.getByText("Test Header")).toBeInTheDocument();
41
41
  expect(screen.getByText("Test Children")).toBeInTheDocument();
42
42
  });
43
43
 
44
44
  it("increments count when add button is clicked", async () => {
45
- render(Counter, { props: defaultProps });
45
+ render(Demo, { props: defaultProps });
46
46
  const addButton = screen.getByRole("button", { name: "+" });
47
47
 
48
48
  await fireEvent.click(addButton);
@@ -50,7 +50,7 @@ describe("Counter.svelte", () => {
50
50
  });
51
51
 
52
52
  it("decrements count when subtract button is clicked", async () => {
53
- render(Counter, { props: defaultProps });
53
+ render(Demo, { props: defaultProps });
54
54
  const subtractButton = screen.getByRole("button", { name: "-" });
55
55
 
56
56
  await fireEvent.click(subtractButton);
@@ -58,7 +58,7 @@ describe("Counter.svelte", () => {
58
58
  });
59
59
 
60
60
  it("calls the show message function", async () => {
61
- render(Counter, { props: defaultProps });
61
+ render(Demo, { props: defaultProps });
62
62
  const sendButton = screen.getByRole("button", { name: "Send value" });
63
63
 
64
64
  await fireEvent.click(sendButton);
@@ -67,7 +67,7 @@ describe("Counter.svelte", () => {
67
67
  });
68
68
 
69
69
  it("updates the component when the nanostore value changes", async () => {
70
- render(Counter, { props: defaultProps });
70
+ render(Demo, { props: defaultProps });
71
71
 
72
72
  expect(screen.getByText(/Mocked Nano Value/i)).toBeInTheDocument();
73
73
 
package/template/test/integration/svelte/{SlotCounter.wrapper.svelte → Demo.wrapper.svelte} RENAMED
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import { vi } from "vitest";
3
3
 
4
- import Counter from "../../../src/framework/svelte/Counter.svelte";
4
+ import Demo from "../../../src/framework/svelte/Demo.svelte";
5
5
 
6
6
  export let initialCount = 5;
7
7
  export let showMessage = "mockFn";
@@ -21,7 +21,7 @@
21
21
  };
22
22
  </script>
23
23
 
24
- <Counter {initialCount} {showMessage}>
24
+ <Demo {initialCount} {showMessage}>
25
25
  <h1 slot="header">Test Header</h1>
26
26
  <div>Test Children</div>
27
- </Counter>
27
+ </Demo>
package/template/test/integration/vue/{Counter.test.ts → Demo.test.ts} RENAMED
@@ -1,9 +1,9 @@
1
1
  import { fireEvent, render, screen, waitFor } from "@testing-library/vue";
2
2
  import { it, vi } from "vitest";
3
3
 
4
- import Counter from "../../../src/framework/vue/Counter.vue";
4
+ import Demo from "../../../src/framework/vue/Demo.vue";
5
5
 
6
- describe("Counter", () => {
6
+ describe("Demo", () => {
7
7
  const defaultProps = {
8
8
  initialCount: 5,
9
9
  showMessage: "mockFunction",
@@ -40,7 +40,7 @@ describe("Counter", () => {
40
40
  });
41
41
 
42
42
  it("renders the initial count", () => {
43
- render(Counter, {
43
+ render(Demo, {
44
44
  props: defaultProps,
45
45
  slots: {
46
46
  default: "<div><p>Test Children</p></div>",
@@ -51,7 +51,7 @@ describe("Counter", () => {
51
51
  });
52
52
 
53
53
  it("renders header slot", () => {
54
- render(Counter, {
54
+ render(Demo, {
55
55
  props: defaultProps,
56
56
  slots: {
57
57
  default: "<div><p>Test Children</p></div>",
@@ -62,7 +62,7 @@ describe("Counter", () => {
62
62
  });
63
63
 
64
64
  it("renders default slot content", () => {
65
- render(Counter, {
65
+ render(Demo, {
66
66
  props: defaultProps,
67
67
  slots: {
68
68
  default: "<div><p>Test Children</p></div>",
@@ -73,7 +73,7 @@ describe("Counter", () => {
73
73
  });
74
74
 
75
75
  it("increments count when add button is clicked", async () => {
76
- render(Counter, {
76
+ render(Demo, {
77
77
  props: defaultProps,
78
78
  slots: {
79
79
  default: "<div><p>Test Children</p></div>",
@@ -86,7 +86,7 @@ describe("Counter", () => {
86
86
  });
87
87
 
88
88
  it("decrements count when subtract button is clicked", async () => {
89
- render(Counter, {
89
+ render(Demo, {
90
90
  props: defaultProps,
91
91
  slots: {
92
92
  default: "<div><p>Test Children</p></div>",
@@ -99,7 +99,7 @@ describe("Counter", () => {
99
99
  });
100
100
 
101
101
  it("calls the show message function with the current count", async () => {
102
- render(Counter, {
102
+ render(Demo, {
103
103
  props: defaultProps,
104
104
  slots: {
105
105
  default: "<div><p>Test Children</p></div>",
@@ -113,7 +113,7 @@ describe("Counter", () => {
113
113
  });
114
114
 
115
115
  it("updates the component when the nanostore value changes", async () => {
116
- render(Counter, {
116
+ render(Demo, {
117
117
  props: defaultProps,
118
118
  slots: {
119
119
  default: "<div><p>Test Children</p></div>",
package/template/tsconfig.json CHANGED
@@ -4,7 +4,6 @@
4
4
  "exclude": ["dist"],
5
5
  "compilerOptions": {
6
6
  "jsx": "preserve",
7
- "jsxImportSource": "react",
8
7
  "types": ["node", "vitest/globals"]
9
8
  }
10
9
  }
package/template/vitest.config.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="vitest" />
2
2
  import angular from "@analogjs/vite-plugin-angular";
3
+ import preact from "@preact/preset-vite";
3
4
  import { svelte } from "@sveltejs/vite-plugin-svelte";
4
5
  import react from "@vitejs/plugin-react";
5
6
  import vue from "@vitejs/plugin-vue";
@@ -20,6 +21,17 @@ export default defineConfig(({ mode }) => ({
20
21
  setupFiles: ["test/setup-test-env-angular.ts"],
21
22
  },
22
23
  },
24
+ {
25
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
26
+ plugins: [preact() as any],
27
+ test: {
28
+ environment: "happy-dom",
29
+ globals: true,
30
+ include: ["test/integration/preact/**/*.test.tsx"],
31
+ name: "preact",
32
+ setupFiles: ["test/setup-test-env.ts"],
33
+ },
34
+ },
23
35
  {
24
36
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
25
37
  plugins: [react() as any],