fix: iframe preview urls (#123)

* chore: add files to package.json

* chore: publish 0.0.31-preview

* chore: update files

* chore: publish 0.0.31-preview.1

* fix: try replacing react-router-dom search param creation

* chore: publish 0.0.31-preview.2

* fix: remove useMemo, add console logs

* chore: publish 0.0.31-preview.3

* fix: try moving context up one level

* chore: publish 0.0.31-preview.4

* fix: remove console.logs

* fix: filter empty url records

.npmignore

@@ -2,7 +2,7 @@ tests
 cypress
 cypress.config.ts 
 .github
-lib
+
 .eslintrc
 .prettierrc
 renovate.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sweatpants/libra",
-  "version": "0.0.30",
+  "version": "0.0.31-preview.4",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,6 +10,16 @@
   "bin": {
     "libra": "dist/cli.mjs"
   },
+  "files": [
+    "assets",
+    "api",
+    "dist",
+    "lib",
+    "src",
+    "types",
+    "index.html",
+    "preview.html"
+  ],
   "scripts": {
     "build": "rimraf dist && rollup -c && npm run prepare:panda",
     "build:w": "rimraf dist && rollup -c -w",

src/main/components/Toolbar.tsx

@@ -4,12 +4,14 @@ import { Open } from '../icons';
 import { css } from '../../lb-system/css';
 import { SettingsContext } from '../context/settings';
 import { useUrl } from '../hooks/useUrl';
+import { LibraContext } from '../context/libra';
 
 export const Toolbar: FC = () => {
   const { hideSidebar, toggleSidebar, setColorChoice, colorChoice } =
     useContext(SettingsContext);
+  const { activeId } = useContext(LibraContext);
 
-  const url = useUrl({ preview: true });
+  const url = useUrl({ id: activeId, preview: true });
 
   return (
     <div

src/main/hooks/useUrl.ts

@@ -1,38 +1,18 @@
-import { useContext, useMemo } from 'react';
-import { createSearchParams } from 'react-router-dom';
-import { LibraContext } from '../context/libra';
+import { useColorScheme } from '@sweatpants/react';
 
 interface UseUrlOptions {
   preview?: boolean;
   id?: string;
 }
 
-const filterObject = (obj: Record<string, any>) => {
-  return Object.keys(obj).reduce((acc, key) => {
-    if (obj[key]) {
-      return { ...acc, [key]: obj[key] };
-    }
-    return acc;
-  }, {});
-};
-
 export const useUrl = ({ preview, id }: UseUrlOptions = {}): string => {
-  const { activeId, scheme } = useContext(LibraContext);
+  const [scheme] = useColorScheme();
 
-  const params = useMemo(
-    () =>
-      createSearchParams(
-        new URLSearchParams(
-          filterObject({
-            entry: id || activeId,
-            scheme
-          })
-        )
-      ),
-    [id, activeId, scheme]
-  );
+  const params = new URLSearchParams({
+    ...(id ? { entry: id } : {}),
+    ...(scheme ? { scheme: scheme } : {})
+  }).toString();
 
   const path = preview ? '/preview.html' : '/';
-
   return `${path}?${params}`;
 };