fresh icon indicating copy to clipboard operation
fresh copied to clipboard

fix: tailwind supports routes and islands provided by plugins

Open deer opened this issue 1 year ago • 6 comments

closes https://github.com/denoland/fresh/issues/2159

@mcgear, please take a look at this. I got my comment cleaned up a bit and it's working for my three test cases.

  1. The first is included in this PR, where I've hacked a plugin into an existing tailwind test. I added a components folder with a component, modified the tailwind config to not scan this folder, and then used this component within a route from the plugin. Without my changes, the text is unstyled; with my changes, it works as expected.
  2. The second is outside of this code base (and hasn't left my computer yet), but it's a "real" usage. Previously I was working around the issue by providing a safelist, which I've now removed. Everything is still styled correctly! 🎉 This project follows fresh's pattern of having source and then tests/fixtures, so everything was local.
  3. Finally I wanted to test a remote plugin. What to do when the remote plugin hasn't been updated to use this branch?
export default defineConfig({
  plugins: [{...blogPlugin(blogOptions), location: "https://deno.land/x/[email protected]/src/plugin/blog.ts", projectLocation: "https://deno.land/x/[email protected]"}, ga4Plugin(), tailwind()],
});

After hacking the two new properties into the plugin returned by blogPlugin, updating fresh to be my branch (i.e. "$fresh/": "https://raw.githubusercontent.com/deer/fresh/2159_plugin_routes_tailwind/",), and removing the safelist, this is also working.

If you use this branch in your project, I'm curious to see if it works.

I haven't tested this with builds yet, and I know this is already going to fail in CI for some web assembly reason (at least on my computer). But I wanted to put this up since it's solving a pretty big problem with plugins.

deer avatar Jan 19 '24 15:01 deer

PTAL at my last suggestion regarding your DM query. deno_std can be used, but it doesn't make a huge difference. Nor does this code make me think that there's a need for a new API in deno_std.

I'm not really aware of the context behind this PR, so take my suggestions with a pinch of salt, but the code looks good to me 👍🏾

Thanks for the suggestions -- these look great. I'll incorporate these now and get this cleaned up some more.

deer avatar Jan 22 '24 15:01 deer

todo:

  • [x] fix tests on windows
  • [x] write proper tests for this change

deer avatar Jan 22 '24 22:01 deer

@iuioiua, as we discussed yesterday, I'm working the pluginification of saaskit using this PR. It's going well, except for your usage of "@/": "./" in the import map. This is breaking my module resolution. I logged https://github.com/denoland/deno_graph/issues/364 since it doesn't seem like something I should be doing.

Given that I want to get this done sooner rather than later, I'm trying to do the module resolution myself. Unfortunately I'm encountering https://github.com/denoland/vscode_deno/issues/708 when trying to debug the project. So using console.log to fix the problem is slow going.

deer avatar Jan 24 '24 04:01 deer

Perhaps, try get this working for local plugins, where all the code for that plugin lies within that plugin's directory. Then, you might be able to just walk() the .tsx files and call Deno.readTextFile(). That seems like an alright v0 of the implementation and I'm sure there'll be a learning opportunity on the way to get you to the next version.

iuioiua avatar Jan 24 '24 05:01 iuioiua

@marvinhagemeister @iuioiua, I think this is ready to look at. There's an uptake of this PR in https://github.com/denoland/saaskit/pull/660.

I've added a few different test cases to make sure that the different ways of adding routes via plugins are covered. (Most of the emphasis is on the module resolution code.)

deer avatar Jan 25 '24 17:01 deer

I'm not sure whether this should be merged until https://github.com/denoland/vscode_deno/issues/708 is resolved. Otherwise I don't think people will be able to debug their apps.

deer avatar Jan 30 '24 15:01 deer