@datocms/astro 0.6.5-0 → 0.6.5

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 (2) hide show
  1. package/package.json +2 -2
  2. package/src/ContentLink/ContentLink.astro +92 -75
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@datocms/astro",
3
3
  "description": "A set of components and utilities to work faster with DatoCMS in Astro projects.",
4
4
  "type": "module",
5
- "version": "0.6.5-0",
5
+ "version": "0.6.5",
6
6
  "sideEffects": false,
7
7
  "repository": {
8
8
  "type": "git",
@@ -45,7 +45,7 @@
45
45
  ],
46
46
  "dependencies": {
47
47
  "@0no-co/graphql.web": "^1.0.7",
48
- "@datocms/content-link": "^0.3.7",
48
+ "@datocms/content-link": "^0.3.9",
49
49
  "datocms-listen": "^1.0.1",
50
50
  "datocms-structured-text-generic-html-renderer": "^5.0.0",
51
51
  "datocms-structured-text-utils": "^5.1.6"
package/src/ContentLink/ContentLink.astro CHANGED
@@ -66,94 +66,111 @@ const enableClickToEditValue =
66
66
  : enableClickToEdit;
67
67
  ---
68
68
 
69
- <div
70
- id="datocms-content-link-root"
69
+ <datocms-content-link
71
70
  data-enable-click-to-edit={enableClickToEditValue !== undefined
72
71
  ? JSON.stringify(enableClickToEditValue)
73
72
  : undefined}
74
73
  data-strip-stega={stripStega ? 'true' : undefined}
75
- style="display: none;"
76
74
  >
77
- </div>
75
+ </datocms-content-link>
78
76
 
79
77
  <script>
80
78
  import { createController } from '@datocms/content-link';
81
79
  import { navigate } from 'astro:transitions/client';
82
80
 
83
- let controller: ReturnType<typeof createController> | null = null;
84
-
85
- // Read configuration from data attributes
86
- const rootElement = document.getElementById('datocms-content-link-root');
87
- const enableClickToEditAttr = rootElement?.getAttribute('data-enable-click-to-edit');
88
- const stripStegaAttr = rootElement?.getAttribute('data-strip-stega');
89
-
90
- const enableClickToEdit = enableClickToEditAttr ? JSON.parse(enableClickToEditAttr) : undefined;
91
- const stripStega = stripStegaAttr === 'true';
92
-
93
- // Initialize the content-link controller
94
- function initContentLink() {
95
- controller = createController({
96
- // Handle navigation requests from the Web Previews plugin
97
- // Inside Visual mode, users can navigate to different URLs (like a browser bar)
98
- // and the plugin will request the preview to navigate accordingly
99
- onNavigateTo: (path: string) => {
100
- navigate(path);
101
- },
102
- // Strip stega encoding if requested
103
- stripStega: stripStega,
104
- });
105
-
106
- // Notify the controller of the current path
107
- controller.setCurrentPath(document.location.toString());
108
-
109
- // Listen for Astro page-load events (fires after client-side navigation)
110
- //
111
- // IMPORTANT: Why this works even without <ClientRouter /> (View Transitions):
112
- //
113
- // The 'astro:page-load' event fires in two scenarios:
114
- //
115
- // 1. WITH View Transitions (<ClientRouter />):
116
- // - Event fires on initial page load and after every client-side navigation
117
- // - The <ClientRouter /> component enables full SPA-like routing
118
- //
119
- // 2. WITHOUT View Transitions:
120
- // - Event STILL fires on initial page load if any module imports from 'astro:transitions/client'
121
- // - The import above ('import { navigate } from astro:transitions/client') triggers
122
- // the module's initialization code, which registers a 'load' event listener that
123
- // dispatches 'astro:page-load' on page load
124
- // - The navigate() function will work but falls back to full page reload
125
- // (it detects no view transitions are enabled and uses location.href instead)
126
- // - This means the component works correctly for both scenarios without requiring
127
- // the user to enable View Transitions
128
- //
129
- // In summary: By importing from 'astro:transitions/client', we ensure this component
130
- // works seamlessly regardless of whether the site uses View Transitions or not.
131
- document.addEventListener('astro:page-load', () => {
132
- if (controller) {
133
- controller.setCurrentPath(document.location.toString());
134
- }
135
- });
136
-
137
- // Enable click-to-edit mode if requested via prop
138
- if (enableClickToEdit !== undefined) {
139
- if (typeof enableClickToEdit === 'boolean') {
140
- controller.enableClickToEdit();
141
- } else {
142
- controller.enableClickToEdit(enableClickToEdit);
81
+ class DatoCMSContentLink extends HTMLElement {
82
+ private controller: ReturnType<typeof createController> | null = null;
83
+ private pageLoadHandler: (() => void) | null = null;
84
+
85
+ connectedCallback() {
86
+ this.initContentLink();
87
+ }
88
+
89
+ disconnectedCallback() {
90
+ this.cleanup();
91
+ }
92
+
93
+ private initContentLink() {
94
+ // Read configuration from data attributes
95
+ const enableClickToEditAttr = this.getAttribute('data-enable-click-to-edit');
96
+ const stripStegaAttr = this.getAttribute('data-strip-stega');
97
+
98
+ const enableClickToEdit = enableClickToEditAttr
99
+ ? JSON.parse(enableClickToEditAttr)
100
+ : undefined;
101
+ const stripStega = stripStegaAttr === 'true';
102
+
103
+ // Initialize the content-link controller
104
+ this.controller = createController({
105
+ // Handle navigation requests from the Web Previews plugin
106
+ // Inside Visual mode, users can navigate to different URLs (like a browser bar)
107
+ // and the plugin will request the preview to navigate accordingly
108
+ onNavigateTo: (path: string) => {
109
+ navigate(path);
110
+ },
111
+ // Strip stega encoding if requested
112
+ stripStega: stripStega,
113
+ });
114
+
115
+ // Notify the controller of the current path
116
+ this.controller.setCurrentPath(document.location.toString());
117
+
118
+ // Listen for Astro page-load events (fires after client-side navigation)
119
+ //
120
+ // IMPORTANT: Why this works even without <ClientRouter /> (View Transitions):
121
+ //
122
+ // The 'astro:page-load' event fires in two scenarios:
123
+ //
124
+ // 1. WITH View Transitions (<ClientRouter />):
125
+ // - Event fires on initial page load and after every client-side navigation
126
+ // - The <ClientRouter /> component enables full SPA-like routing
127
+ //
128
+ // 2. WITHOUT View Transitions:
129
+ // - Event STILL fires on initial page load if any module imports from 'astro:transitions/client'
130
+ // - The import above ('import { navigate } from astro:transitions/client') triggers
131
+ // the module's initialization code, which registers a 'load' event listener that
132
+ // dispatches 'astro:page-load' on page load
133
+ // - The navigate() function will work but falls back to full page reload
134
+ // (it detects no view transitions are enabled and uses location.href instead)
135
+ // - This means the component works correctly for both scenarios without requiring
136
+ // the user to enable View Transitions
137
+ //
138
+ // In summary: By importing from 'astro:transitions/client', we ensure this component
139
+ // works seamlessly regardless of whether the site uses View Transitions or not.
140
+ this.pageLoadHandler = () => {
141
+ if (this.controller) {
142
+ this.controller.setCurrentPath(document.location.toString());
143
+ }
144
+ };
145
+ document.addEventListener('astro:page-load', this.pageLoadHandler);
146
+
147
+ // Enable click-to-edit mode if requested via prop
148
+ if (enableClickToEdit !== undefined) {
149
+ if (typeof enableClickToEdit === 'boolean') {
150
+ this.controller.enableClickToEdit();
151
+ } else {
152
+ this.controller.enableClickToEdit(enableClickToEdit);
153
+ }
143
154
  }
155
+ // Otherwise, click-to-edit overlays are not enabled by default.
156
+ // Users can press and hold Alt/Option key to temporarily enable click-to-edit mode
144
157
  }
145
- // Otherwise, click-to-edit overlays are not enabled by default.
146
- // Users can press and hold Alt/Option key to temporarily enable click-to-edit mode
147
- }
148
158
 
149
- // Initialize on page load
150
- initContentLink();
159
+ private cleanup() {
160
+ if (this.controller) {
161
+ this.controller.dispose();
162
+ this.controller = null;
163
+ }
151
164
 
152
- // Cleanup on page unload
153
- window.addEventListener('beforeunload', () => {
154
- if (controller) {
155
- controller.dispose();
156
- controller = null;
165
+ if (this.pageLoadHandler) {
166
+ document.removeEventListener('astro:page-load', this.pageLoadHandler);
167
+ this.pageLoadHandler = null;
168
+ }
157
169
  }
158
- });
170
+ }
171
+
172
+ // Register the custom element
173
+ if (!customElements.get('datocms-content-link')) {
174
+ customElements.define('datocms-content-link', DatoCMSContentLink);
175
+ }
159
176
  </script>