sdk(astro,nextjs): add astro sdk and ensure window.op always first on nextjs

packages/sdks/astro/src/IdentifyComponent.astro

@@ -0,0 +1,9 @@
+---
+import type { IdentifyPayload } from '@openpanel/web';
+import { filterProps } from './asto-utils';
+interface Props extends IdentifyPayload {}
+
+const props = Astro.props as Props;
+---
+
+<script is:inline set:html={`window.op('identify', ${JSON.stringify(filterProps(props))});`} />

packages/sdks/astro/src/OpenPanelComponent.astro

@@ -0,0 +1,66 @@
+---
+import type {
+OpenPanelMethodNames,
+OpenPanelOptions
+} from '@openpanel/web';
+
+type Props = Omit<OpenPanelOptions, 'filter'> & {
+  profileId?: string;
+  cdnUrl?: string;
+  filter?: string;
+  globalProperties?: Record<string, unknown>;
+};
+
+const { profileId, cdnUrl, globalProperties, ...options } = Astro.props;
+
+const CDN_URL = 'https://openpanel.dev/op1.js';
+
+const stringify = (obj: unknown) => {
+  if (typeof obj === 'object' && obj !== null && obj !== undefined) {
+    const entries = Object.entries(obj).map(([key, value]) => {
+      if (key === 'filter') {
+        return `"${key}":${value}`;
+      }
+      return `"${key}":${JSON.stringify(value)}`;
+    });
+    return `{${entries.join(',')}}`;
+  }
+
+  return JSON.stringify(obj);
+};
+
+const methods: { name: OpenPanelMethodNames; value: unknown }[] = [
+  {
+    name: 'init',
+    value: {
+      ...options,
+      sdk: 'astro',
+      sdkVersion: '1.0.1',
+    },
+  },
+];
+if (profileId) {
+  methods.push({
+    name: 'identify',
+    value: {
+      profileId,
+    },
+  });
+}
+if (globalProperties) {
+  methods.push({
+    name: 'setGlobalProperties',
+    value: globalProperties,
+  });
+}
+
+const scriptContent = `window.op = window.op || function(...args) {(window.op.q = window.op.q || []).push(args)};
+${methods
+  .map((method) => {
+    return `window.op('${method.name}', ${stringify(method.value)});`;
+  })
+  .join('\n')}`;
+---
+
+<script src={cdnUrl ?? CDN_URL} async defer />
+<script is:inline set:html={scriptContent} />

packages/sdks/astro/src/SetGlobalPropertiesComponent.astro

@@ -0,0 +1,9 @@
+---
+import { filterProps } from './asto-utils';
+
+type Props = Record<string, unknown>;
+
+const props = Astro.props as Props;
+---
+
+<script is:inline set:html={`window.op('setGlobalProperties', ${JSON.stringify(filterProps(props))});`} />

packages/sdks/astro/src/asto-utils.ts

@@ -0,0 +1,7 @@
+const BLACKLISTED_PROPS = ['class'];
+
+export function filterProps(props: Record<string, unknown>) {
+  return Object.fromEntries(
+    Object.entries(props).filter(([key]) => !BLACKLISTED_PROPS.includes(key)),
+  );
+}