@linktr.ee/linkapp 0.0.18 → 0.0.19

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 (4) hide show
  1. package/dist/lib/utils/setup-runtime.d.ts.map +1 -1
  2. package/dist/lib/utils/setup-runtime.js +103 -40
  3. package/dist/lib/utils/setup-runtime.js.map +1 -1
  4. package/package.json +1 -1
package/dist/lib/utils/setup-runtime.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"setup-runtime.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/setup-runtime.ts"],"names":[],"mappings":"AAgHA;;;GAGG;AACH,wBAAgB,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAyBtD"}
1
+ {"version":3,"file":"setup-runtime.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/setup-runtime.ts"],"names":[],"mappings":"AA+KA;;;GAGG;AACH,wBAAgB,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAyBtD"}
package/dist/lib/utils/setup-runtime.js CHANGED
@@ -5,7 +5,7 @@ import { detectLayouts } from "../build/detect-layouts.js";
5
5
  const __filename = fileURLToPath(import.meta.url);
6
6
  const __dirname = dirname(__filename);
7
7
  /**
8
- * Generates main.tsx content with detected layouts
8
+ * Generates main.tsx content with detected layouts and parent-iframe communication
9
9
  */
10
10
  function generateMainTsx(projectPath) {
11
11
  const detection = detectLayouts(projectPath);
@@ -26,10 +26,10 @@ function generateMainTsx(projectPath) {
26
26
  // Generate the wrapper logic - use Layout if it exists, otherwise render directly
27
27
  const renderLogic = hasLayout
28
28
  ? ` <Layout>
29
- <LayoutComponent {...mockContext} />
29
+ <LayoutComponent {...data} />
30
30
  </Layout>`
31
- : ` <LayoutComponent {...mockContext} />`;
32
- return `import { StrictMode } from 'react'
31
+ : ` <LayoutComponent {...data} />`;
32
+ return `import { StrictMode, useEffect } from 'react'
33
33
  import { createRoot } from 'react-dom/client'
34
34
  ${layoutImport}
35
35
  ${imports}
@@ -40,12 +40,52 @@ const layouts: Record<string, React.ComponentType<any>> = {
40
40
  ${layoutsObj}
41
41
  }
42
42
 
43
- function App() {
44
- // Get layout from query parameter
43
+ // Type for extension data from parent iframe
44
+ type ExtensionData = {
45
+ __linkUrl?: string
46
+ __thumbnail?: string
47
+ __linkParams?: any
48
+ __environment?: any
49
+ displayType?: string
50
+ [key: string]: any
51
+ }
52
+
53
+ const rootElement = document.getElementById('root')
54
+ if (!rootElement) {
55
+ throw new Error('Root element not found')
56
+ }
57
+
58
+ // Detect if we're running inside an iframe (production on Linktree)
59
+ const isInIframe = window.parent !== window
60
+
61
+ // Mock context for development mode
62
+ const mockContext: ExtensionData = {
63
+ linkUrl: 'https://example.com/demo',
64
+ showTitle: true,
65
+ theme: {
66
+ cssVariables: {
67
+ '--button-style-text': '#000000',
68
+ '--button-style-background': '#ffffff',
69
+ '--button-style-inner-radius': '12px',
70
+ '--button-style-border-color': '#e5e7eb',
71
+ '--button-style-background-hover': '#f3f4f6',
72
+ '--button-style-contrast-color': '#ffffff',
73
+ '--profileBackground': '#ffffff',
74
+ },
75
+ textColor: '#000000',
76
+ backgroundColor: '#ffffff',
77
+ borderRadius: '12px',
78
+ borderColor: '#e5e7eb',
79
+ backgroundHover: '#f3f4f6',
80
+ contrastColor: '#ffffff',
81
+ textHoverColor: '#111827',
82
+ },
83
+ }
84
+
85
+ function App({ data }: { data: ExtensionData }) {
86
+ // Get layout from query parameter or default to classic
45
87
  const params = new URLSearchParams(window.location.search)
46
88
  const layoutName = params.get('layout') || 'classic'
47
-
48
- // Get the layout component
49
89
  const LayoutComponent = layouts[layoutName] || layouts.classic
50
90
 
51
91
  if (!LayoutComponent) {
@@ -58,45 +98,68 @@ function App() {
58
98
  )
59
99
  }
60
100
 
61
- // Mock context for development
62
- const mockContext = {
63
- linkUrl: 'https://example.com/demo',
64
- showTitle: true,
65
- theme: {
66
- cssVariables: {
67
- '--button-style-text': '#000000',
68
- '--button-style-background': '#ffffff',
69
- '--button-style-inner-radius': '12px',
70
- '--button-style-border-color': '#e5e7eb',
71
- '--button-style-background-hover': '#f3f4f6',
72
- '--button-style-contrast-color': '#ffffff',
73
- '--profileBackground': '#ffffff',
74
- },
75
- textColor: '#000000',
76
- backgroundColor: '#ffffff',
77
- borderRadius: '12px',
78
- borderColor: '#e5e7eb',
79
- backgroundHover: '#f3f4f6',
80
- contrastColor: '#ffffff',
81
- textHoverColor: '#111827',
82
- },
83
- }
84
-
85
101
  return (
86
102
  ${renderLogic}
87
103
  )
88
104
  }
89
105
 
90
- const rootElement = document.getElementById('root')
91
- if (!rootElement) {
92
- throw new Error('Root element not found')
106
+ const postExtensionReadyMessage = () => {
107
+ const height = rootElement.clientHeight
108
+ const message = {
109
+ type: 'extension-ready',
110
+ data: {
111
+ ready: true,
112
+ height: height,
113
+ },
114
+ }
115
+ console.log('[LinkApp] Posting extension-ready message with height:', height)
116
+ window.parent.postMessage(message, '*')
93
117
  }
94
118
 
95
- createRoot(rootElement).render(
96
- <StrictMode>
97
- <App />
98
- </StrictMode>
99
- )
119
+ const renderApp = (data: ExtensionData) => {
120
+ const root = createRoot(rootElement)
121
+ root.render(
122
+ <StrictMode>
123
+ <App data={data} />
124
+ </StrictMode>
125
+ )
126
+ postExtensionReadyMessage()
127
+ }
128
+
129
+ // Setup parent-iframe communication for production mode
130
+ if (isInIframe) {
131
+ // Listen for extension-data from parent ExtensionEmbed component
132
+ window.addEventListener('message', function handler(event) {
133
+ // Security: validate origin (allow Linktree domains and localhost for testing)
134
+ const allowedOrigins = /^https:\\/\\/(qa\\.)?linktr\\.ee$|^https:\\/\\/linktree\\.local$|^https?:\\/\\/localhost(:\\d+)?$/
135
+ if (!allowedOrigins.test(event.origin)) {
136
+ return
137
+ }
138
+
139
+ if (event.data?.type !== 'extension-data') {
140
+ return
141
+ }
142
+
143
+ // Render app with data from parent
144
+ renderApp(event.data.data ?? {})
145
+ window.removeEventListener('message', handler)
146
+ })
147
+
148
+ // Send extension-loaded message to parent
149
+ window.parent.postMessage({ type: 'extension-loaded' }, '*')
150
+
151
+ // Forward interaction events to parent for analytics
152
+ document.addEventListener('interaction-event', (event: Event) => {
153
+ const customEvent = event as CustomEvent<Record<string, unknown>>
154
+ window.parent.postMessage(
155
+ { type: 'interaction-event', data: customEvent.detail },
156
+ '*'
157
+ )
158
+ })
159
+ } else {
160
+ // Development mode: render immediately with mock data
161
+ renderApp(mockContext)
162
+ }
100
163
  `;
101
164
  }
102
165
  /**
package/dist/lib/utils/setup-runtime.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"setup-runtime.js","sourceRoot":"","sources":["../../../src/lib/utils/setup-runtime.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"setup-runtime.js","sourceRoot":"","sources":["../../../src/lib/utils/setup-runtime.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@linktr.ee/linkapp",
3
- "version": "0.0.18",
3
+ "version": "0.0.19",
4
4
  "description": "Development, build, and deployment tooling for LinkApps",
5
5
  "type": "module",
6
6
  "bin": {