Merge pull request #68 from bholmesdev/feat/query

simple-stack-query

.changeset/beige-needles-tell.md

@@ -0,0 +1,23 @@
+---
+"simple-stack-stream": patch
+"simple-stack-frame": patch
+"simple-stack-query": patch
+"vite-plugin-simple-scope": patch
+"simple-stack-form": patch
+---
+
+introduces the new `simple-stack-query` package, a simple library to query the DOM from your Astro components.
+
+```astro
+<button data-target={$('btn')}>Click me</button>
+
+<script>
+  ready(() => {
+    $('btn').addEventListener('click', () => {
+      console.log("It's like JQuery but not!");
+    });
+  });
+</script>
+```
+
+Visit the package README for more information.

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20]
     steps:
       - name: Checkout code
         uses: actions/checkout@v2
@@ -29,4 +29,25 @@ jobs:
         run: pnpm build
 
       - name: Lint check
-        run: pnpm check
+        run: pnpm check
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Test packages
+        run: pnpm test

package.json

@@ -1,30 +1,33 @@
 {
-  "name": "simple-stack",
-  "version": "0.0.0",
-  "description": "Astro for apps",
-  "scripts": {
-    "dev": "turbo dev --filter='./packages/*'",
-    "dev:all": "turbo dev",
-    "build": "turbo build --filter='./packages/*'",
-    "build:all": "turbo build",
-    "check": "biome check packages/",
-    "check:apply": "biome check packages/ --apply",
-    "lint": "biome lint packages/",
-    "lint:apply": "biome lint packages/ --apply",
-    "format": "biome format",
-    "format:write": "biome format --write",
-    "version": "changeset version && pnpm install --no-frozen-lockfile && pnpm run check"
-  },
-  "keywords": [
-    "withastro"
-  ],
-  "author": "bholmesdev",
-  "license": "MIT",
-  "devDependencies": {
-    "@biomejs/biome": "^1.4.1",
-    "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.1",
-    "turbo": "^1.11.2"
-  },
-  "packageManager": "[email protected]"
+	"name": "simple-stack",
+	"version": "0.0.0",
+	"description": "Astro for apps",
+	"scripts": {
+		"dev": "turbo dev --filter='./packages/*'",
+		"dev:all": "turbo dev",
+		"build": "turbo build --filter='./packages/*'",
+		"build:all": "turbo build",
+		"test": "turbo test --filter='./packages/*'",
+		"check": "biome check packages/",
+		"check:apply": "biome check packages/ --apply",
+		"lint": "biome lint packages/",
+		"lint:apply": "biome lint packages/ --apply",
+		"format": "biome format",
+		"format:write": "biome format --write",
+		"version": "changeset version && pnpm install --no-frozen-lockfile && pnpm run check"
+	},
+	"keywords": [
+		"withastro"
+	],
+	"author": "bholmesdev",
+	"license": "MIT",
+	"devDependencies": {
+		"@biomejs/biome": "^1.8.3",
+		"@changesets/changelog-github": "^0.5.0",
+		"@changesets/cli": "^2.27.1",
+		"@types/node": "^20.14.11",
+		"turbo": "^1.11.2",
+		"typescript": "^5.5.3"
+	},
+	"packageManager": "[email protected]"
 }

packages/form/components/FormName.astro

@@ -1,6 +1,6 @@
 ---
 type Props = {
-  value: string;
+	value: string;
 };
 
 const { value } = Astro.props;

packages/form/package.json

@@ -33,7 +33,7 @@
 		"preact": "^10.19.3",
 		"react": "^18.0.0",
 		"solid-js": "^1.8.7",
-		"typescript": "^5.3.3",
+		"typescript": "^5.5.3",
 		"zod": "^3.22.4"
 	},
 	"peerDependencies": {

packages/form/src/middleware.ts

@@ -1,7 +1,7 @@
 import type { ValidRedirectStatus } from "astro";
 import { defineMiddleware } from "astro/middleware";
 import type { ZodRawShape } from "zod";
-import { validateForm } from "./module";
+import { validateForm } from "./module.js";
 
 const formContentTypes = [
 	"application/x-www-form-urlencoded",

packages/form/src/module.ts

@@ -240,7 +240,9 @@ function getInputType<T extends ZodType>(fieldValidator: T): InputProp["type"] {
 	return "text";
 }
 
-function getInputInfo<T extends ZodType>(fieldValidator: T): {
+function getInputInfo<T extends ZodType>(
+	fieldValidator: T,
+): {
 	type: InputProp["type"];
 	isArray: boolean;
 	isOptional: boolean;

packages/form/templates/preact/Form.tsx

@@ -1,7 +1,5 @@
 // Generated by simple:form
 
-import { type ComponentProps, createContext } from "preact";
-import { useContext, useState } from "preact/hooks";
 import { navigate } from "astro:transitions/client";
 import {
 	type FieldErrors,
@@ -14,6 +12,8 @@ import {
 	toValidateField,
 	validateForm,
 } from "simple:form";
+import { type ComponentProps, createContext } from "preact";
+import { useContext, useState } from "preact/hooks";
 
 export function useCreateFormContext(
 	validator: FormValidator,
@@ -78,7 +78,7 @@ export function Form({
 							typeof formProps.action === "string"
 								? formProps.action
 								: // Check for Preact signals
-								  formProps.action?.value ?? "";
+									formProps.action?.value ?? "";
 						navigate(action, { formData });
 						return formContext.trackAstroSubmitStatus();
 					}

packages/form/templates/preact/tsconfig.json

@@ -1,7 +1,7 @@
 {
-  "extends": "astro/tsconfigs/strictest",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact"
-  }
-}
+	"extends": "astro/tsconfigs/strictest",
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact"
+	}
+}

packages/form/templates/react-external/tsconfig.json

@@ -1,7 +1,7 @@
 {
-  "extends": "astro/tsconfigs/strictest",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
-  }
-}
+	"extends": "astro/tsconfigs/strictest",
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "react"
+	}
+}

packages/form/templates/react/Form.tsx

@@ -1,11 +1,5 @@
 // Generated by simple:form
 
-import {
-	type ComponentProps,
-	createContext,
-	useContext,
-	useState,
-} from "react";
 import { navigate } from "astro:transitions/client";
 import {
 	type FieldErrors,
@@ -18,6 +12,12 @@ import {
 	toValidateField,
 	validateForm,
 } from "simple:form";
+import {
+	type ComponentProps,
+	createContext,
+	useContext,
+	useState,
+} from "react";
 
 export function useCreateFormContext(
 	validator: FormValidator,

packages/form/templates/react/tsconfig.json

@@ -1,7 +1,7 @@
 {
-  "extends": "astro/tsconfigs/strictest",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "react"
-  }
-}
+	"extends": "astro/tsconfigs/strictest",
+	"compilerOptions": {
+		"jsx": "react-jsx",
+		"jsxImportSource": "react"
+	}
+}

packages/form/templates/solid-js/Form.tsx

@@ -1,13 +1,5 @@
 // Generated by simple:form
 
-import {
-	type ComponentProps,
-	For,
-	Show,
-	createContext,
-	createSignal,
-	useContext,
-} from "solid-js";
 import { navigate } from "astro:transitions/client";
 import {
 	type FieldErrors,
@@ -20,6 +12,14 @@ import {
 	toValidateField,
 	validateForm,
 } from "simple:form";
+import {
+	type ComponentProps,
+	For,
+	Show,
+	createContext,
+	createSignal,
+	useContext,
+} from "solid-js";
 
 export function useCreateFormContext(
 	validator: FormValidator,

packages/frame/components/Frame.astro

@@ -2,44 +2,44 @@
 import type { HTMLAttributes } from "astro/types";
 
 type Props<T extends Record<string, any>> = {
-  component(_props: T): any;
-  props?: T;
+	component(_props: T): any;
+	props?: T;
 } & HTMLAttributes<"div">;
 
 const { component: Component, props, ...attrs } = Astro.props;
 
 function safeParseUrl(url: string) {
-  try {
-    return new URL(url);
-  } catch {
-    return null;
-  }
+	try {
+		return new URL(url);
+	} catch {
+		return null;
+	}
 }
 
 const componentFileUrl = Component.moduleId
-  ? safeParseUrl("file://" + Component.moduleId)
-  : null;
+	? safeParseUrl("file://" + Component.moduleId)
+	: null;
 const pagesDirUrl = safeParseUrl(import.meta.env.PAGES_DIR);
 if (!(pagesDirUrl instanceof URL)) {
-  throw new Error(
-    "[simple:frame] Could not scan pages directory. Did you apply the `simple:frame` integration?"
-  );
+	throw new Error(
+		"[simple:frame] Could not scan pages directory. Did you apply the `simple:frame` integration?",
+	);
 }
 if (!(componentFileUrl instanceof URL)) {
-  throw new Error(
-    "[simple:frame] Could not resolve component file path. Did you pass an Astro component to <Frame component />?"
-  );
+	throw new Error(
+		"[simple:frame] Could not resolve component file path. Did you pass an Astro component to <Frame component />?",
+	);
 }
 if (!componentFileUrl.href.startsWith(pagesDirUrl.href)) {
-  throw new Error(
-    `[simple:frame] Frame component ${Component.moduleId} is not in the pages directory. Please move to pages/ to expose as a route.`
-  );
+	throw new Error(
+		`[simple:frame] Frame component ${Component.moduleId} is not in the pages directory. Please move to pages/ to expose as a route.`,
+	);
 }
 
 const pagePath = componentFileUrl.href
-  .slice(pagesDirUrl.href.length)
-  .replace(/^\/+/, "")
-  .replace(/\.astro$/, "");
+	.slice(pagesDirUrl.href.length)
+	.replace(/^\/+/, "")
+	.replace(/\.astro$/, "");
 ---
 
 <simple-frame {...attrs} src={pagePath} data-props={JSON.stringify(props)}>

packages/frame/package.json

@@ -13,10 +13,7 @@
 		"./client": "./dist/client.js",
 		"./components": "./components/index.ts"
 	},
-	"keywords": [
-		"withastro",
-		"astro-integration"
-	],
+	"keywords": ["withastro", "astro-integration"],
 	"author": "bholmesdev",
 	"license": "MIT",
 	"repository": {
@@ -25,11 +22,11 @@
 		"directory": "packages/frame"
 	},
 	"dependencies": {
-		"astro-integration-kit": "^0.6.0"
+		"astro-integration-kit": "^0.15.0"
 	},
 	"devDependencies": {
 		"astro": "^4.5.5",
-		"vite": "^5.0.10",
-		"typescript": "^5.3.3"
+		"typescript": "^5.5.3",
+		"vite": "^5.0.10"
 	}
 }