AG-3390 - Enable hot module reloading on dev server

* Keep partial for prod build
* Use middleware to add in site prefix on dev (to allow it to work on external sites like plunkr)

See 7650635

packages/ag-charts-website/package.json

@@ -50,6 +50,7 @@
  "@angular/compiler": "14.3.0",
  "lucide-react": "^0.343.0",
  "nanostores": "^0.9.3",
+ "node-html-parser": "^6.1.13",
  "@markdoc/markdoc": "0.3.5",
  "glob": "8.0.3",
  "dotenv": "10.0.0",

packages/ag-charts-website/src/middleware/index.ts

@@ -1,6 +1,25 @@
+import { urlWithBaseUrl } from '@utils/urlWithBaseUrl';
 import { defineMiddleware } from 'astro/middleware';
+import { parse } from 'node-html-parser';
 import * as prettier from 'prettier';
 
+const env = import.meta.env;
+
+const rewriteAstroGeneratedContent = (body: string) => {
+ const html = parse(body);
+
+ // In dev, add public site url base for all scripts, so it works in external sites
+ if (env.DEV) {
+ html.querySelectorAll('script').forEach((script: HTMLElement) => {
+ const src = script.getAttribute('src');
+ if (src != null && src.startsWith(urlWithBaseUrl('/'))) {
+ script.setAttribute('src', new URL(src, env.PUBLIC_SITE_URL).toString());
+ }
+ });
+ }
+ return html.toString();
+};
+
 const BINARY_EXTENSIONS = ['png', 'webp', 'jpeg', 'jpg'];
 
 function isHtml(path: string) {
@@ -31,6 +50,8 @@ export const onRequest = defineMiddleware(async (context, next) => {
  let body = await response.text();
 
  if (isHtml(context.url.pathname)) {
+ body = rewriteAstroGeneratedContent(body);
+
  try {
  body = await prettier.format(body, {
  parser: 'html',

packages/ag-charts-website/src/pages/[internalFramework]/[pageName]/examples/[exampleName].astro

@@ -3,6 +3,7 @@ import { getCollection } from 'astro:content';
 import type { InternalFramework } from '@ag-grid-types';
 import DocsFrameworkTemplate from '@features/docs/components/DocsFrameworkTemplate.astro';
 import { getDocsExamplePages } from '@features/docs/utils/pageData';
+import { getIsDev } from '@utils/env';
 
 export async function getStaticPaths() {
  const pages = await getCollection('docs');
@@ -11,8 +12,8 @@ export async function getStaticPaths() {
  });
 }
 
-// NOTE: Render as a partial, so that astro does not insert any website styles into the page
-export const partial = true;
+// NOTE: Render as a partial, so that astro does not insert any website styles into the page (when not dev)
+export const partial = !getIsDev();
 
 const { internalFramework, pageName, exampleName } = Astro.params;
 ---

packages/ag-charts-website/src/pages/[internalFramework]/[pageName]/examples/[exampleName]/codesandbox.astro

@@ -4,6 +4,7 @@ import type { InternalFramework } from '@ag-grid-types';
 import DocsFrameworkTemplate from '@features/docs/components/DocsFrameworkTemplate.astro';
 import { getDocsExamplePages } from '@features/docs/utils/pageData';
 import { isReactInternalFramework } from '@utils/framework';
+import { getIsDev } from '@utils/env';
 
 /**
  * This page is the same as `[exampleName].astro`, but for Code Sandbox examples
@@ -15,8 +16,8 @@ export async function getStaticPaths() {
  });
 }
 
-// NOTE: Render as a partial, so that astro does not insert any website styles into the page
-export const partial = true;
+// NOTE: Render as a partial, so that astro does not insert any website styles into the page (when not dev)
+export const partial = !getIsDev();
 
 const { internalFramework, pageName, exampleName } = Astro.params;
 

packages/ag-charts-website/src/pages/[internalFramework]/[pageName]/examples/[exampleName]/example-runner.astro

@@ -3,6 +3,7 @@ import { getCollection } from 'astro:content';
 import type { InternalFramework } from '@ag-grid-types';
 import DocsFrameworkTemplate from '@features/docs/components/DocsFrameworkTemplate.astro';
 import { getDocsExamplePages } from '@features/docs/utils/pageData';
+import { getIsDev } from '@utils/env';
 
 export async function getStaticPaths() {
  const pages = await getCollection('docs');
@@ -11,8 +12,8 @@ export async function getStaticPaths() {
  });
 }
 
-// NOTE: Render as a partial, so that astro does not insert any website styles into the page
-export const partial = true;
+// NOTE: Render as a partial, so that astro does not insert any website styles into the page (when not dev)
+export const partial = !getIsDev();
 
 const { internalFramework, pageName, exampleName } = Astro.params;
 ---

packages/ag-charts-website/src/pages/[internalFramework]/[pageName]/examples/[exampleName]/plunkr.astro

@@ -3,6 +3,7 @@ import { getCollection } from 'astro:content';
 import type { InternalFramework } from '@ag-grid-types';
 import DocsFrameworkTemplate from '@features/docs/components/DocsFrameworkTemplate.astro';
 import { getDocsExamplePages } from '@features/docs/utils/pageData';
+import { getIsDev } from '@utils/env';
 
 /**
  * This page is the same as `[exampleName].astro`, but for Plunkr examples
@@ -14,8 +15,8 @@ export async function getStaticPaths() {
  });
 }
 
-// NOTE: Render as a partial, so that astro does not insert any website styles into the page
-export const partial = true;
+// NOTE: Render as a partial, so that astro does not insert any website styles into the page (when not dev)
+export const partial = !getIsDev();
 
 const { internalFramework, pageName, exampleName } = Astro.params;
 ---

packages/ag-charts-website/src/pages/gallery/examples/[exampleName].astro

@@ -2,15 +2,16 @@
 import { getEntry } from 'astro:content';
 import GalleryFrameworkTemplate from '@features/gallery/components/GalleryFrameworkTemplate.astro';
 import { getGalleryExamplePages } from '@features/gallery/utils/pageData';
+import { getIsDev } from '@utils/env';
 
 export async function getStaticPaths() {
  const galleryDataEntry = await getEntry('gallery', 'data');
  const pages = getGalleryExamplePages({ galleryData: galleryDataEntry.data });
  return pages;
 }
 
-// NOTE: Render as a partial, so that astro does not insert any website styles into the page
-export const partial = true;
+// NOTE: Render as a partial, so that astro does not insert any website styles into the page (when not dev)
+export const partial = !getIsDev();
 
 const { exampleName } = Astro.params;
 ---

packages/ag-charts-website/src/pages/gallery/examples/[exampleName]/codesandbox.astro

@@ -2,6 +2,7 @@
 import { getEntry } from 'astro:content';
 import GalleryFrameworkTemplate from '@features/gallery/components/GalleryFrameworkTemplate.astro';
 import { getGalleryExamplePages } from '@features/gallery/utils/pageData';
+import { getIsDev } from '@utils/env';
 
 /**
  * This page is the same as `[exampleName].astro`, but for Code Sandbox examples
@@ -12,8 +13,8 @@ export async function getStaticPaths() {
  return pages;
 }
 
-// NOTE: Render as a partial, so that astro does not insert any website styles into the page
-export const partial = true;
+// NOTE: Render as a partial, so that astro does not insert any website styles into the page (when not dev)
+export const partial = !getIsDev();
 
 const { exampleName } = Astro.params;
 

packages/ag-charts-website/src/pages/gallery/examples/[exampleName]/example-runner.astro

@@ -2,15 +2,16 @@
 import { getEntry } from 'astro:content';
 import GalleryFrameworkTemplate from '@features/gallery/components/GalleryFrameworkTemplate.astro';
 import { getGalleryExamplePages } from '@features/gallery/utils/pageData';
+import { getIsDev } from '@utils/env';
 
 export async function getStaticPaths() {
  const galleryDataEntry = await getEntry('gallery', 'data');
  const pages = getGalleryExamplePages({ galleryData: galleryDataEntry.data });
  return pages;
 }
 
-// NOTE: Render as a partial, so that astro does not insert any website styles into the page
-export const partial = true;
+// NOTE: Render as a partial, so that astro does not insert any website styles into the page (when not dev)
+export const partial = !getIsDev();
 
 const { exampleName } = Astro.params;
 ---

packages/ag-charts-website/src/pages/gallery/examples/[exampleName]/plunkr.astro

@@ -1,4 +1,5 @@
 ---
+import { getIsDev } from '@utils/env';
 import { getEntry } from 'astro:content';
 import GalleryFrameworkTemplate from '@features/gallery/components/GalleryFrameworkTemplate.astro';
 import { getGalleryExamplePages } from '@features/gallery/utils/pageData';
@@ -12,8 +13,8 @@ export async function getStaticPaths() {
  return pages;
 }
 
-// NOTE: Render as a partial, so that astro does not insert any website styles into the page
-export const partial = true;
+// NOTE: Render as a partial, so that astro does not insert any website styles into the page (when not dev)
+export const partial = !getIsDev();
 
 const { exampleName } = Astro.params;
 ---

yarn.lock

@@ -14264,7 +14264,7 @@ hdr-histogram-percentiles-obj@^3.0.0:
  resolved "https://registry.yarnpkg.com/hdr-histogram-percentiles-obj/-/hdr-histogram-percentiles-obj-3.0.0.tgz#9409f4de0c2dda78e61de2d9d78b1e9f3cba283c"
  integrity sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw==
 
-[email protected], he@^1.1.0, he@^1.2.0:
+[email protected].0, [email protected].x, he@^1.1.0, he@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -18534,6 +18534,14 @@ node-gyp@^9.0.0:
  tar "^6.1.2"
  which "^2.0.2"
 
+node-html-parser@^6.1.13:
+ version "6.1.13"
+ resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-6.1.13.tgz#a1df799b83df5c6743fcd92740ba14682083b7e4"
+ integrity sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg==
+ dependencies:
+ css-select "^5.1.0"
+ he "1.2.0"
+
 node-int64@^0.4.0:
  version "0.4.0"
  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"