remove refs to $app from components

per sveltejs/kit#1485, packaged components cannot reference SvelteKit runtime import aliases.
dnotes · Nov 23, 2022 · 769ea8b · 769ea8b
1 parent e492f62
commit 769ea8b
Show file tree

Hide file tree

Showing 13 changed files with 29 additions and 34 deletions.
diff --git a/package/CMSAdmin.svelte b/package/CMSAdmin.svelte
@@ -1,15 +1,14 @@
-<script>// @ts-ignore TODO: why can't it find this?
-import { page } from '$app/stores';
-import getLabelFromID from "./utils/getLabelFromID";
+<script>import getLabelFromID from "./utils/getLabelFromID";
 import Nav from "./ui/Nav.svelte";
 export let cms;
 export let adminPath;
 export let data = undefined;
+export let url;
 $: sections = Object.values(cms.adminPages)
     .filter(o => !o.id.match('/'));
 let adminPage;
 let adminPagePromise;
-$: basePath = $page.url.pathname.replace('/' + adminPath, '');
+$: basePath = url.pathname.replace('/' + adminPath, '');
 $: if (adminPath)
     adminPagePromise = (async () => { adminPage = cms.getAdminPage(adminPath); })();
 $: title = adminPage ? adminPath.split('/').map((t, i) => adminPage.label[i] || getLabelFromID(t)).join(' : ') : 'Site Admin';

diff --git a/package/CMSAdmin.svelte.d.ts b/package/CMSAdmin.svelte.d.ts
@@ -5,6 +5,7 @@ declare const __propDef: {
         cms: SvelteCMS;
         adminPath: string;
         data?: Object;
+        url: URL;
     };
     events: {
         [evt: string]: CustomEvent<any>;

diff --git a/package/display/field/Date.svelte b/package/display/field/Date.svelte
@@ -1,11 +1,11 @@
 <script>import Display from "../../core/Display";
-import { browser } from '$app/environment';
+import { isBrowser } from 'browser-or-node';
 export let cms;
 export let entity;
 export let item;
 export let displayMode;
 let lang = 'en-US';
-$: if (browser && window?.navigator?.language)
+$: if (isBrowser && window?.navigator?.language)
     lang = window.navigator.language;
 $: realDate = typeof (item) === 'string' ? new Date(item) || item : item;
 $: displayDate = realDate?.toLocaleString(lang) || 'no date';

diff --git a/package/install/routes/(cms)/admin/[...adminPath]/+page.svelte b/package/install/routes/(cms)/admin/[...adminPath]/+page.svelte
@@ -20,5 +20,5 @@
 {#await data}
   fetching data...
 {:then data}
-  <CmsAdmin {cms} data={adminData} {adminPath} />
+  <CmsAdmin {cms} data={adminData} {adminPath} url={$page.url} />
 {/await}
diff --git a/package/plugins/admin/components/CMSContentEdit.svelte b/package/plugins/admin/components/CMSContentEdit.svelte
@@ -1,20 +1,17 @@
 <script>import CmsEditorForm from '../../../CMSEditorForm.svelte';
-import { goto } from '$app/navigation';
-import { browser } from '$app/environment';
+// import { goto } from '$app/navigation';
+// import { isBrowser, isWebWorker, isJsDom } from 'browser-or-node'
 export let cms;
-export let basePath;
 export let adminPath;
 export let data;
 let [contentPath, contentTypeID, slug] = adminPath.split('/');
 $: ([contentPath, contentTypeID, slug] = adminPath.split('/'));
 // If new content was just posted, goto the new url
 let isNew = slug === '_';
-if (browser && data._slug) {
-    if (isNew)
-        goto(`${basePath}/${contentPath}/${contentTypeID}/${data._slug}`);
-    else if (slug !== data._slug)
-        goto(`${basePath}/${contentPath}/${contentTypeID}/${data._slug}`);
-}
+// if (isBrowser && data._slug) {
+//   if (isNew) goto(`${basePath}/${contentPath}/${contentTypeID}/${data._slug}`)
+//   else if (slug !== data._slug) goto(`${basePath}/${contentPath}/${contentTypeID}/${data._slug}`)
+// }
 $: content = data ?? cms.getContent(contentTypeID, slug, { getRaw: true });
 </script>
 

diff --git a/package/plugins/admin/components/CMSContentEdit.svelte.d.ts b/package/plugins/admin/components/CMSContentEdit.svelte.d.ts
@@ -3,7 +3,6 @@ import type SvelteCMS from '../../..';
 declare const __propDef: {
     props: {
         cms: SvelteCMS;
-        basePath: string;
         adminPath: string;
         data: any;
     };

diff --git a/package/plugins/admin/widgets/CMSWidgetEntityList.svelte b/package/plugins/admin/widgets/CMSWidgetEntityList.svelte
@@ -1,5 +1,4 @@
 <script>import { tick } from "svelte";
-import { page } from "$app/stores";
 import CmsWidgetEntity from "./CMSWidgetEntity.svelte";
 import Button from "../../../ui/Button.svelte";
 import Modal from "../../../ui/Modal.svelte";
@@ -9,6 +8,7 @@ export let cms;
 export let id;
 export let field = undefined;
 export let value;
+export let url;
 // @ts-ignore
 export let options = field?.widget?.options;
 let opts = Object.assign({}, options);
@@ -18,7 +18,7 @@ let addIDEl;
 let newEntityID;
 let newEntityType;
 let newEntityTypeList = cms.listEntities(entityType.id);
-let section = $page.url.searchParams.get('section') || 'config';
+let section = url.searchParams.get('section') || 'config';
 export function addEntity(id) {
     items = [...items, [id, id]];
 }

diff --git a/package/plugins/admin/widgets/CMSWidgetEntityList.svelte.d.ts b/package/plugins/admin/widgets/CMSWidgetEntityList.svelte.d.ts
@@ -9,6 +9,7 @@ declare const __propDef: {
         value: {
             [id: string]: string | EntityConfigSetting;
         };
+        url: URL;
         options?: {
             entityType: string;
             isTopLevelEntity?: boolean;

diff --git a/src/routes/(cms)/admin/[...adminPath]/+page.svelte b/src/routes/(cms)/admin/[...adminPath]/+page.svelte
@@ -20,5 +20,5 @@
 {#await data}
   fetching data...
 {:then data}
-  <CmsAdmin {cms} data={adminData} {adminPath} />
+  <CmsAdmin {cms} data={adminData} {adminPath} url={$page.url} />
 {/await}
diff --git a/src/sveltecms/CMSAdmin.svelte b/src/sveltecms/CMSAdmin.svelte
@@ -1,21 +1,20 @@
 <script lang="ts">
 import type SvelteCMS from "sveltecms"
-// @ts-ignore TODO: why can't it find this?
-import { page } from '$app/stores'
 import getLabelFromID from "./utils/getLabelFromID";
 import Nav from "sveltecms/ui/Nav.svelte";
 import type { AdminPage } from "./core/AdminPage";
 
   export let cms:SvelteCMS
   export let adminPath:string
   export let data:Object = undefined
+  export let url:URL
 
   $: sections = Object.values(cms.adminPages)
     .filter(o => !o.id.match('/'))
   let adminPage:AdminPage
   let adminPagePromise:Promise<void>
 
-  $: basePath = $page.url.pathname.replace('/' + adminPath, '')
+  $: basePath = url.pathname.replace('/' + adminPath, '')
   $: if (adminPath) adminPagePromise = (async () => { adminPage = cms.getAdminPage(adminPath); })()
   $: title = adminPage ? adminPath.split('/').map((t,i) => adminPage.label[i] || getLabelFromID(t) ).join(' : ') : 'Site Admin'
 

diff --git a/src/sveltecms/display/field/Date.svelte b/src/sveltecms/display/field/Date.svelte
@@ -2,15 +2,15 @@
 import type SvelteCMS from "sveltecms";
 import Display from "sveltecms/core/Display";
 import type Field from "sveltecms/core/Field";
-import { browser } from '$app/environment'
+import { isBrowser } from 'browser-or-node'
 
   export let cms:SvelteCMS
   export let entity:Field
   export let item:string|Date
   export let displayMode:string
 
   let lang = 'en-US'
-  $: if (browser && window?.navigator?.language) lang = window.navigator.language
+  $: if (isBrowser && window?.navigator?.language) lang = window.navigator.language
   $: realDate = typeof (item) === 'string' ? new Date(item) || item : item
   $: displayDate = realDate?.toLocaleString(lang) || 'no date'
 

diff --git a/src/sveltecms/plugins/admin/components/CMSContentEdit.svelte b/src/sveltecms/plugins/admin/components/CMSContentEdit.svelte
@@ -2,11 +2,10 @@
 import type SvelteCMS from 'sveltecms'
 import CmsEditorForm from 'sveltecms/CMSEditorForm.svelte'
 
-import { goto } from '$app/navigation';
-import { browser } from '$app/environment'
+// import { goto } from '$app/navigation';
+// import { isBrowser, isWebWorker, isJsDom } from 'browser-or-node'
 
   export let cms:SvelteCMS
-  export let basePath:string
   export let adminPath:string
   export let data
 
@@ -15,10 +14,10 @@ import { browser } from '$app/environment'
 
   // If new content was just posted, goto the new url
   let isNew = slug === '_'
-  if (browser && data._slug) {
-    if (isNew) goto(`${basePath}/${contentPath}/${contentTypeID}/${data._slug}`)
-    else if (slug !== data._slug) goto(`${basePath}/${contentPath}/${contentTypeID}/${data._slug}`)
-  }
+  // if (isBrowser && data._slug) {
+  //   if (isNew) goto(`${basePath}/${contentPath}/${contentTypeID}/${data._slug}`)
+  //   else if (slug !== data._slug) goto(`${basePath}/${contentPath}/${contentTypeID}/${data._slug}`)
+  // }
 
   $: content = data ?? cms.getContent(contentTypeID, slug, { getRaw:true })
 

diff --git a/src/sveltecms/plugins/admin/widgets/CMSWidgetEntityList.svelte b/src/sveltecms/plugins/admin/widgets/CMSWidgetEntityList.svelte
@@ -3,7 +3,6 @@ import type { EntityConfigSetting, WidgetField } from "sveltecms";
 import type SvelteCMS from "sveltecms";
 
 import { tick } from "svelte";
-import { page } from "$app/stores";
 
 import CmsWidgetEntity from "sveltecms/plugins/admin/widgets/CMSWidgetEntity.svelte";
 import Button from "sveltecms/ui/Button.svelte";
@@ -15,6 +14,7 @@ import EntityListSectionToggle from "sveltecms/ui/EntityListSectionToggle.svelte
   export let id:string
   export let field:WidgetField = undefined
   export let value:{[id:string]:string|EntityConfigSetting}
+  export let url:URL
   // @ts-ignore
   export let options:{
     entityType:string,
@@ -31,7 +31,7 @@ import EntityListSectionToggle from "sveltecms/ui/EntityListSectionToggle.svelte
   let newEntityType
   let newEntityTypeList = cms.listEntities(entityType.id)
 
-  let section = $page.url.searchParams.get('section') || 'config'
+  let section = url.searchParams.get('section') || 'config'
 
   export function addEntity(id) {
     items = [...items, [id,id]]