Add semi-functional Svelte router 🎉 #9

austincrim · 2022-06-16T22:40:15Z

Adds scaffolding and WIP implementation for remix-router-svelte

Known TODOS:

Fix useLoaderData reactivity bug
Figure out solution for useFetcher form
Configure build/publish setup
Find and squash inevitable bugs
Documentation, I suppose

brophdawg11 · 2022-06-18T13:47:09Z

cypress.config.ts

+  supportFile: false,
+  video: false,
+  env: {
+    UI_LIBRARY: library,


Added this to use Cypress.env('UI_LIBRARY') to conditionally skip certain test suites

brophdawg11 · 2022-06-18T13:47:35Z

cypress/integration/error_spec.js

+const { conditionalDescribe } = require("../utils/utils");
+
+conditionalDescribe(
+  { react: true, vue: true, svelte: false },


Skip the error_spec files for svelte

brophdawg11 · 2022-06-18T13:48:59Z

packages/svelte/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2022 Matt Brophy <matt@brophy.org>


Don't forget to change this over to yourself @austincrim!

brophdawg11 · 2022-06-18T13:49:49Z

packages/svelte/README.md

@@ -0,0 +1,104 @@
+# remix-router-vue


Before publishing let's get this updated accordingly 👍

brophdawg11 · 2022-06-18T13:50:15Z

packages/svelte/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "remix-router-svelte",
+  "version": "0.3.0",


Suggested change

"version": "0.3.0",

"version": "0.1.0",

brophdawg11 · 2022-06-18T13:51:06Z

packages/svelte/reference-app/routes/Nested/Child.svelte

+
+<h3>Child Route</h3>
+
+<!-- currently broken! -->


Not anymore, right??

brophdawg11 · 2022-06-18T13:54:55Z

packages/svelte/src/dom.ts

+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import type { FormEncType, FormMethod } from "@remix-run/router";


Just FYI - eventually this will all come from @remix-run/router, it's just not exported at the moment. So I would avoid making any changes in here as you keep moving on svelte. If you find bugs or need to change anything - we'll want to note that and make the corresponding change to the file currently in react-router-dom. Hopefully we get the exports reworked in the 6.4 release in the next couple weeks though.

brophdawg11 · 2022-06-18T13:55:48Z

packages/svelte/src/remix-router-svelte.ts

+
+export function useLocation(): Readable<Location> {
+  let ctx = getRouterContext();
+  return derived(ctx.state, ({ location }) => location);


Any idea if these suffer the same issue that useLoaderData did using the derived store instead of getStoreSnapshot?

brophdawg11 · 2022-06-18T13:56:32Z

packages/svelte/vite.config.ts

+        external: ["@remix-run/router", "svelte"],
+        output: {
+          globals: {
+            "@remix-run/router": "Router",


Do you need "svelte": "Svelte" here too?

brophdawg11

This looks great! I pushed up a commit to allow conditional testing to cypress suites and disabled error_spec for svelte. Feel free to merge this and then keep working against that branch in new PRs.

I'm going to start looking at adding changesets in main - so as soon as you're comfortable with the base functionality and have yarn build and package.json files all configured we should be good to publish a 0.1.0 👍

brophdawg11 · 2022-06-18T15:28:23Z

packages/svelte/package.json

+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@remix-run/router": "0.1.0",


I've updated main to the latest version here so you'll want to update this to match what's in react/vue - currently 0.2.0-pre.2

austincrim · 2022-06-20T18:02:16Z

Thanks for the review! I'm going to merge and then address your comments in a subsequent PR 👍.

* address pr #9 comments, useLoaderData and useFetcher actually working * pr comments

* Add semi-functional Svelte router 🎉 (#9) * create svelte package, functional nested routing! * <Link>, loaders functional * Forms, fetchers functional * more router hooks * folder structure * replace accidental edits * fix??? useLoaderData * Add conditional testing to cypress * Update error message Co-authored-by: Matt Brophy <matt@brophy.org> * address pr #9 comments, fix useLoaderData and useFetcher (#11) * address pr #9 comments, useLoaderData and useFetcher actually working * pr comments * get new e2e tests passing * Configure build for `remix-router-svelte` (#13) * reorg files, use svelte-kit package * typo * cleanup before publish * cleanup before publish * "fix" reference-app ts errors * more cleanup * fix cypress config file name * fix tests? Co-authored-by: Matt Brophy <matt@brophy.org>

austincrim added 6 commits June 15, 2022 14:14

create svelte package, functional nested routing!

5777532

<Link>, loaders functional

27eee51

Forms, fetchers functional

047d0ec

more router hooks

e03da9f

folder structure

7a0d6d1

replace accidental edits

48aa958

austincrim requested a review from brophdawg11 June 16, 2022 22:40

austincrim and others added 2 commits June 17, 2022 17:03

fix??? useLoaderData

dbff9db

Add conditional testing to cypress

f5c968b

brophdawg11 reviewed Jun 18, 2022

View reviewed changes

packages/svelte/README.md

@@ -0,0 +1,104 @@

# remix-router-vue

Copy link

Owner

brophdawg11 Jun 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Before publishing let's get this updated accordingly 👍

brophdawg11 reviewed Jun 18, 2022

View reviewed changes

packages/svelte/reference-app/routes/Nested/Child.svelte

<h3>Child Route</h3>



Copy link

Owner

brophdawg11 Jun 18, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not anymore, right??

brophdawg11 reviewed Jun 18, 2022

View reviewed changes

brophdawg11 approved these changes Jun 18, 2022

View reviewed changes

Update error message

2c1c4d6

brophdawg11 reviewed Jun 18, 2022

View reviewed changes

wobsoriano mentioned this pull request Jun 20, 2022

Maybe avoid generating endpoints next to routes pixelmund/svemix#50

Closed

austincrim merged commit 8a2e1c6 into svelte Jun 20, 2022

austincrim deleted the remix-router-svelte branch June 20, 2022 18:02

austincrim added a commit that referenced this pull request Jun 30, 2022

address pr #9 comments, useLoaderData and useFetcher actually working

375a3b6

austincrim mentioned this pull request Jun 30, 2022

address pr #9 comments, fix useLoaderData and useFetcher #11

Merged

austincrim added a commit that referenced this pull request Jul 5, 2022

address pr #9 comments, fix useLoaderData and useFetcher (#11)

69c3a57

* address pr #9 comments, useLoaderData and useFetcher actually working * pr comments

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add semi-functional Svelte router 🎉 #9

Add semi-functional Svelte router 🎉 #9

austincrim commented Jun 16, 2022

brophdawg11 Jun 18, 2022

brophdawg11 Jun 18, 2022

brophdawg11 Jun 18, 2022

brophdawg11 Jun 18, 2022

brophdawg11 Jun 18, 2022

brophdawg11 Jun 18, 2022

brophdawg11 Jun 18, 2022

brophdawg11 Jun 18, 2022

brophdawg11 Jun 18, 2022

brophdawg11 left a comment

brophdawg11 Jun 18, 2022

austincrim commented Jun 20, 2022

Add semi-functional Svelte router 🎉 #9

Add semi-functional Svelte router 🎉 #9

Conversation

austincrim commented Jun 16, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brophdawg11 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

austincrim commented Jun 20, 2022