Merge branch 'link-store'

src/lib/components/ShipEdit/Propulsion/Engine.svelte

@@ -25,7 +25,6 @@
   export let rating = 0;
   export let api = getContext("api");
 
-  console.log(api?.dispatch?.setDrive);
   $: api?.dispatch?.setDrive?.({ rating, advanced });
 </script>
 

src/lib/store/api.ts

@@ -1,9 +1,20 @@
 import ship from "./ship";
+import { browser } from "$app/environment";
 
 export type Api = ReturnType<typeof ship.createStore>;
 
 export const createApi = () => {
-    const api = ship.createStore();
+  const state = browser
-    console.log(api);
+    ? JSON.parse(localStorage.getItem("ship") || "null")
-    return api;
+    : undefined;
+
+  const api = ship.createStore(state || undefined);
+
+  if (browser) {
+    api.subscribe(() => {
+      localStorage.setItem("ship", JSON.stringify(api.getState()));
+    });
+  }
+
+  return api;
 };

src/lib/store/ship.ts

@@ -18,7 +18,9 @@ import { fireconsDux } from "./ship/weaponry/firecons";
 import { adfcDux } from "./ship/weaponry/adfc";
 import { weaponsDux } from "./ship/weaponry/weapons";
 
-process.env.UPDEEP_MODE = "dangerously_never_freeze";
+if (typeof process !== "undefined") {
+  process.env.UPDEEP_MODE = "dangerously_never_freeze";
+}
 
 const structure = new Updux({
   initialState: {},
@@ -98,11 +100,6 @@ shipDux.addReaction((api) => {
   };
 });
 
-shipDux.addEffect((api) => (next) => (action) => {
-  console.log(action);
-  next(action);
-});
-
 shipDux.addReaction((api) =>
   createSelector(
     api.selectors.getShipMass,

src/routes/+layout.js

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/+page.svelte

@@ -1,5 +1,14 @@
-<ShipEdit />
+<ShipEdit {...ship} />
 
 <script>
+  import { getContext } from "svelte";
+
   import ShipEdit from "$lib/components/ShipEdit.svelte";
+
+  export let api = getContext("api");
+
+  let ship = {};
+  api?.subscribe(() => {
+    ship = api.getState();
+  });
 </script>

src/routes/page.test.js

@@ -1,9 +1,27 @@
-import { render, fireEvent, screen, getByText } from "@testing-library/svelte";
+import { render, fireEvent } from "@testing-library/svelte";
 import "@testing-library/jest-dom";
+import { tick } from "svelte";
 
 import Page from "./+page.svelte";
+import { createApi } from "$lib/store/api.ts";
 
 test("we have a page", () => {
   const { getByText } = render(Page);
   expect(getByText("propulsion")).toBeInTheDocument();
 });
+
+test("we can pass a store", async () => {
+  const context = new Map();
+  const api = createApi();
+  context.set("api", api);
+
+  api.dispatch.updateIdentification({ shipClass: "Bonobo" });
+
+  const { getByPlaceholderText } = render(Page, { context });
+
+  const classInput = getByPlaceholderText("ship class");
+  await fireEvent.input(classInput, { target: { value: "Tarzan" } });
+  expect(classInput.value).toEqual("Tarzan");
+
+  expect(api.getState().identification.shipClass).toBe("Tarzan");
+});