fix(astro): work-around for dev-mode's ReferenceError: __WC_CONFIG__ is not defined errors (#293)

Author: AriPerkkio

packages/astro/src/default/components/OpenInStackblitzLink.astro

@@ -0,0 +1,37 @@
+import StackBlitzSDK from '@stackblitz/sdk';
+import { tutorialStore } from './webcontainer.js';
+
+export function OpenInStackblitzLink() {
+  return (
+    <button
+      title="Open in StackBlitz"
+      className="flex items-center font-size-3.5 text-tk-elements-topBar-iconButton-iconColor hover:text-tk-elements-topBar-iconButton-iconColorHover transition-theme bg-tk-elements-topBar-iconButton-backgroundColor hover:bg-tk-elements-topBar-iconButton-backgroundColorHover p-1 rounded-md"
+      onClick={onClick}
+    >
+      <svg viewBox="0 0 28 28" aria-hidden="true" height="24" width="24">
+        <path
+          fill="currentColor"
+          d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z"
+        ></path>
+      </svg>
+    </button>
+  );
+}
+
+function onClick() {
+  const lesson = tutorialStore.lesson;
+
+  if (!lesson) {
+    throw new Error('Missing lesson');
+  }
+
+  const snapshot = tutorialStore.takeSnapshot();
+  const options = typeof lesson.data.openInStackBlitz === 'object' ? lesson.data.openInStackBlitz : {};
+
+  StackBlitzSDK.openProject({
+    title: options.projectTitle || 'Project generated by TutorialKit',
+    description: options.projectDescription,
+    template: options.projectTemplate || 'node',
+    files: snapshot.files,
+  });
+}

packages/astro/src/default/components/OpenInStackblitzLink.tsx

@@ -3,7 +3,7 @@ import { TopBar } from 'tutorialkit:override-components';
 import type { Lesson } from '@tutorialkit/types';
 import { ThemeSwitch } from './ThemeSwitch';
 import { LoginButton } from './LoginButton';
-import OpenInStackblitzLink from './OpenInStackblitzLink.astro';
+import { OpenInStackblitzLink } from './OpenInStackblitzLink';
 import Logo from './Logo.astro';
 import { useAuth } from './setup';
 
@@ -18,7 +18,7 @@ const { logoLink, openInStackBlitz } = Astro.props;
 <TopBar>
   <Logo slot="logo" logoLink={logoLink ?? '/'} />
 
-  {openInStackBlitz && <OpenInStackblitzLink slot="open-in-stackblitz-link" />}
+  {openInStackBlitz && <OpenInStackblitzLink client:load transition:persist slot="open-in-stackblitz-link" />}
 
   <ThemeSwitch client:load transition:persist slot="theme-switch" />
 

packages/astro/src/default/components/TopBarWrapper.astro

@@ -209,7 +209,7 @@ exports[`create and eject a project 1`] = `
   "src/components/MobileContentToggle.astro",
   "src/components/NavCard.astro",
   "src/components/NavWrapper.tsx",
-  "src/components/OpenInStackblitzLink.astro",
+  "src/components/OpenInStackblitzLink.tsx",
   "src/components/PageLoadingIndicator.astro",
   "src/components/ResizablePanel.astro",
   "src/components/ThemeSwitch.tsx",