astro-tina 0.1.1

package/README.md

@@ -0,0 +1,37 @@
+# astro-tina
+
+An Astro integration for Tina CMS.
+
+At the moment, this integration only provides a client directive that only 
+hydrates React components in the Tina CMS visual editor. This allows websites 
+to support live editing without shipping React to the client.
+
+```astro
+<MyComponent client:tina {...props} />
+```
+
+## Setup
+
+First, follow the [instructions](https://tina.io/docs/frameworks/astro) to set 
+up Tina in your Astro project.
+
+Then, install the integration...
+
+```
+npm install github:dawaltconley/astro-tina
+```
+
+...and add it to your project config.
+
+```mjs
+import { defineConfig } from 'astro/config'
+import react from '@astrojs/react'
+import tina from 'astro-tina'
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [react(), tina()],
+})
+```
+
+You can now hydrate components using the `client:tina` directive.

package/dist/client-tina.d.ts

@@ -0,0 +1,3 @@
+import type { ClientDirective } from 'astro';
+declare const clientTina: ClientDirective;
+export default clientTina;

package/dist/client-tina.js

@@ -0,0 +1,12 @@
+const clientTina = (load) => {
+    try {
+        const isEditor = window.frameElement && window.frameElement.id === 'tina-iframe';
+        if (isEditor) {
+            load().then((hydrate) => hydrate());
+        }
+    }
+    catch (e) {
+        console.error(e);
+    }
+};
+export default clientTina;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import type { AstroIntegration } from 'astro';
+declare module 'astro' {
+    interface AstroClientDirectives {
+        'client:tina'?: boolean;
+    }
+}
+declare const _default: () => AstroIntegration;
+export default _default;

package/dist/index.js

@@ -0,0 +1,12 @@
+const { pathname: entrypoint } = new URL('./client-tina.js', import.meta.url);
+export default () => ({
+    name: 'tina-cms',
+    hooks: {
+        'astro:config:setup': ({ addClientDirective }) => {
+            addClientDirective({
+                name: 'tina',
+                entrypoint,
+            });
+        },
+    },
+});

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "astro-tina",
+  "version": "0.1.1",
+  "description": "Support contextual editing with TinaCMS in static Astro sites.",
+  "type": "module",
+  "main": "dist/index.js",
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "npx tsc",
+    "test": "npm run build",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "withastro",
+    "tina",
+    "tinacms",
+    "astro"
+  ],
+  "author": "Dylan Awalt-Conley",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/html-escaper": "^3.0.0",
+    "@types/node": "^20.5.6",
+    "astro": "^2.10.14",
+    "prettier": "^3.0.2",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "astro": "^2.6.0 || ^3.0.0"
+  }
+}