8000 feat: Supabase adder by mstibbard · Pull Request #556 · svelte-add/svelte-add · GitHub
[go: up one dir, main page]

Skip to content
This repository was archived by the owner on Oct 20, 2024. It is now read-only.

feat: Supabase adder #556

Closed
wants to merge 26 commits into from
Closed

Conversation

mstibbard
Copy link
@mstibbard mstibbard commented Sep 2, 2024

Started working on a Supabase adder

Svelte-Add Tasks

  • Add packageManager to the nextSteps data object so instructions can be specific.
  • Investigate running scripts within an adder (E.g., npx supabase init or pnpm supabase init). This needs some thought as currently svelte-add only installs packages after all adders run. Executing a script within an adder would require earlier capture of the user's package manager and (optional) earlier package installation

Supabase Adder Tasks

  • Add cli option to install Supabase CLI for local development
    • Extend this to run the ${packageManager} supabase init command
      • If above is achievable, subsequently update the ./supabase/config.toml with SvelteKit default dev URL, email templates etc.
  • Add demo option to include the example /private routes
    • If cli option is also selected, include example notes migration and form action etc.
  • Add admin option to implement a Supabase client w/ Service Role Key in $lib/server/supabase-admin
  • Add helpers option to implement some useful Supabase commands within the user's package.json
  • Add auth multi-select option where the user can choose which auth solutions to add incl.
    • Email + password
    • Magic link / OTP
    • OAuth

Copy link
changeset-bot bot commented Sep 2, 2024

🦋 Changeset detected

Latest commit: bcf7b1b

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
pkg-pr-new bot commented Sep 2, 2024

Open in Stackblitz

pnpm add https://pkg.pr.new/svelte-add/svelte-add@556
pnpm add https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/config@556
pnpm add https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/core@556
pnpm add https://pkg.pr.new/svelte-add/svelte-add/@svelte-add/testing-library@556

commit: bcf7b1b

mstibbard and others added 7 commits September 3, 2024 10:27
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
@mstibbard
Copy link
Author

I've added a flawed approach to running scripts within an adder -- it only works within an existing project using pnpm (and if you have supabase cli already cached)... It was an experiment that I will reverse out soon.

I'm thinking a less-flawed approach may be to capture the package manager earlier in the flow and if any adder.scripts exist then install packages within that adder? However that would result in at least 2 runs of e.g., npm install. Would that be acceptable? Is there a better approach?

@manuel3108
Copy link
Member

I've added a flawed approach to running scripts within an adder -- it only works within an existing project using pnpm (and if you have supabase cli already cached)... It was an experiment that I will reverse out soon.

I'm thinking a less-flawed approach may be to capture the package manager earlier in the flow and if any adder.scripts exist then install packages within that adder? However that would result in at least 2 runs of e.g., npm install. Would that be acceptable? Is there a better approach?

Why would it only work in a already created package manager that uses pnpm? If its the problem to detect the currently running package manager, we might be able to borrow that code from create-svelte: https://github.com/sveltejs/kit/blob/05cfb98d0a93e2a2c90b5647bc617f8479d590b7/packages/create-svelte/utils.js#L56-L70

In the worst case, couldn't we ask the user to select a PM without installing the deps directly in the beginning? Although i would prefer an automatic detections as suggested above.

@mstibbard
Copy link
Author

I've now implemented a different approach. Keen for your thoughts before I proceed any further.

Thank you for pointing me to that snippet from create-svelte -- massive help!

Re: my previous comment which upon a re-read was not clear. I don't know enough about package managers to explain why it worked for pnpm, I assume it was due to caching. The experiment was not flawed re: identifying the package manager. It was flawed because it retained the current flow of svelte-add which installs packages after all adders run. This meant attempting to run a dependency script before it was installed, yielding:

  • npx supabase init -> Need to install the following packages: supabase@1.191.3 Ok to proceed? (y)
  • yarn supabase init -> error Command "supabase" not found.
  • pnpm supabase init -> Succeeds
  • bun supabase init -> error: Script not found "supabase"

@manuel3108
Copy link
Member
manuel3108 commented Sep 5, 2024
  • npx supabase init -> Need to install the following packages: supabase@1.191.3 Ok to proceed? (y)
  • yarn supabase init -> error Command "supabase" not found.
  • pnpm supabase init -> Succeeds
  • bun supabase init -> error: Script not found "supabase"

Did you try yarn dlx (https://stackoverflow.com/a/68483894) and bunx (https://bun.sh/docs/cli/bunx) and the same should work for pnpx or pnpm dlx. You could alternatively use COMMANDS[packageManager].execute to get the appropriate execution script from package-manager-detector


Now let's try running it (keep in mind I have never used supabase before)
image
Some of the next steps are indented to much. You might want to use the dedent utility that's already used in multiple places.

Looks like the condition for demo is not working. At least it did not prompt me for it, until i removed the condition.

On the home page a login page (/auth) is linked, that doesn't seem to exist, thus showing 404. Looks like it has the same condition problem as above. After removing that, i was able to proceed further.

Not sure about the notes on the private page. Are they supposed to be visible anywhere once I send them?

Edit: Otherwise everything looks good and works as expected, also code-wise.


As an FYI, we are currently working on a lot of stuff behind the scenes. We don't expect the adder configuration to change in any noticeable amount, so it should be straightforward to prepare this for a merge once we get there. We will let you know for sure!

@mstibbard
Copy link
Author
mstibbard commented Sep 6, 2024

Thanks! Swapped to use execute commands, much better.

I cannot reproduce the demo not working though? The demo requires basic auth or magic link because they are self-contained. There are so many extra steps with an OAuth provider that it didn't seem realistic for a 'quick demo'. If no auth method is chosen OR only OAuth is chosen the demo prompt should not show.

The home page should be untouched unless you pick demo (and hence have also picked basic or magicLink auth). If no auth options are selected then no /auth routes are created so it should 404. Did you not select any auth options and then choose demo (as you removed its conditional)?

Re: notes. They should appear as an unordered list directly above the input text box. Is that not working? EDIT: I'm guessing the demo migrations didn't run, if you re-used the same background supabase services but generated the project multiple times that could happen. If you added the helpers just type pnpm db:up to apply the migrations or pnpm db:reset which will recreate the db and run all migrations.

EDIT: Also keen to see what is in store :)

@manuel3108
Copy link
Member
manuel3108 commented Sep 6, 2024

Just rechecked. Bug was sitting in front of the computer. Didn't realize the auth question was a multiselect. Now everything that happened makes sense.

But does that make sense? How would you structure the demo app with multiple logins? Does that even work.

@mstibbard
Copy link
Author

It would be uncommon to choose both basic and magic link but nothing technically stopping it. The magic link flow is the email confirmation flow every time the user logs in. Choosing basic/magic link + OAuth would be pretty common

@manuel3108
Copy link
Member

Hey @mstibbard sorry for the long wait. Thanks for this awesome PR which was a really good starting point for the supabase adder implementation.

As I mentioned before, we are currently working on some stuff behind the scenes, which means we are working in a private repo 😆. But it's not going to be private for much longer, that's why i wanted to give you a heads up.

Here is what we changed:

  • adapted everything to work with the updated codebase
  • removed OAuth login
    • it felt strange to only support google OAuth will supabase supports many providers
    • the setup didn't really change that much, and left the user with a long to do list on what he needs to do to make this work. We figured we'd leave that to the supabase docs, they'll for sure do a better job at this
  • Made the adder more robust (WIP)
    • The adder, as discussed here, did completely override i.e. +layout.svelte, although it was only necessary to add a method and some html snippets.
    • There were other common files where this happened, but im sure you get the point. As for the /auth and /private files we left them as is, as they are not super common to have in an existing project

We did all of this by patching in your changes, so GH should credit you once this is merged:
image

We hope that you are cool with all those changes, if not please let me know!

@manuel3108 manuel3108 closed this Oct 6, 2024
@manuel3108
Copy link
Member

@mstibbard We had another thought about my last comment, are you using discord by any chance, so that we discuss a few things in private? Would you mind hitting me up? (manuel3108, you can also find me on the svelte discord)

@mstibbard
Copy link
Author

Sure, I have sent a friend request on discord. I'm in Sydney, Australia so unsure how well timezones will work

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants
0