Integrating Svelte?

[levitabris]

Svelte is gaining popularity among people who appreciate simplicity and easy composability. Since its functionality is not based on a js import, would you consider making Civet compatible with .svelte components?

I would recommend a syntax like the following:

<script lang="civet"> 'hello world!' |> console.log </script>

[edemaine]

Sounds like a great idea! Perhaps we can mimic svelte-add/coffeescript? Or is svelte-add still active / the right approach?

Let us know if you'd like to work on this; it doesn't look too difficult.

[STRd6]

We'll need to add support for $: labels too. Should be straightforward.

[edemaine]

Looking at Svelte's TypeScript support, the transpilation may be possible now with our existing Vite plugin which should also work as a Rollup plugin. But obviously this needs testing.

[levitabris]

Sounds like a great idea! Perhaps we can mimic svelte-add/coffeescript? Or is svelte-add still active / the right approach?

Let us know if you'd like to work on this; it doesn't look too difficult.

Not sure if it is the right approach. But I can experiment with mimicing the svelte-add coffeescript and see what happens.

[edemaine]

Great! Feel free to suggest a better approach as well if you find one.

FYI, we've added support for $: to Civet already.

[levitabris]

There is a bit learning curve here. My WIP version:

https://github.com/levitabris/svelte-add

[levitabris]

Update:
It seems that svelte-add coffee script support is just a wrapper around svelte-proprocess(feel free to correct me if wrong), which implemets the original coffee support for svelte. I'm looking into how it was done in the svelte-preprocess.

BTW, the svelte-preprocess seems to be straight forward to config itself🦦

[STRd6]

@levitabris Have you taken a look at our new Rollup and Vite plugins? https://github.com/DanielXMoore/Civet/tree/main/integration/unplugin/examples please try them out and let us know if you have any questions or encounter any errors, thanks!

[adam2am]

Hey, any updates or use-cases with svelte? All I found is an attempt https://github.com/moka-ayumu/svelte-civet 2 years ago

[adam2am]

@edemaine, could you explain the reason for the dislike reaction? I saw that others have also attempted to make the svelte-preprocess work with Civet dependencies (as seen in sveltejs/svelte-preprocess#627 and sveltejs/svelte-preprocess#600). Could you shed some light on your perspective?

[edemaine]

Sorry, I was being too concise. By 👎 I just meant "no, there haven't been any updates". It's still very much of interest, but we haven't heard any news since the last on this thread. It'd be great if you (or anyone) would be willing to try pushing this forward!

[al6x]

New Svelte is pretty much Solid.JS, Svelte lost its unique features, I personally not going to use Svelte anymore, and I think I'm not alone, many people are disliking the new Svelte, so, probably it would became even less popular.

[adam2am]

Sorry, I was being too concise. By 👎 I just meant "no, there haven't been any updates". It's still very much of interest, but we haven't heard any news since the last on this thread. It'd be great if you (or anyone) would be willing to try pushing this forward!

Hey, quick update - made it work with preprocessor+civet devdependency https://github.com/adam2am/svelte-preprocess-with-civet / npm install svelte-preprocess-with-civet and setting up

import { sveltePreprocess } from 'svelte-preprocess-with-civet';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: sveltePreprocess({
		civet: { sync: true }
	}),

But, svelte’s “runes” ($state, $effect, etc.) are purely a feature of the Svelte compiler, and at the moment the compiler only looks for them in files ending in:
• .svelte
• .svelte.js
• .svelte.ts

Even though you can write Civet‐style TypeScript in a .civet modulse, importing it as .civet never invokes the Svelte compiler, so any $state calls in there will still be treated as plain JavaScript (and you’ll get “rune_outside_svelte” errors).

And wrapping your Civet file in the Vite plugin to output a virtual .svelte.js is an idea, but today the Civet unplugin only “loads” files whose IDs end in .civet or .civet.jsx/.civet.tsx. If you tell it to emit .svelte.js, its loadInclude() test doesn’t catch that, so Vite simply tries to read class.svelte.civet.svelte.js off disk and fails.

=> 15:28:44 [vite] (ssr) Error when evaluating SSR module /src/routes/+page.svelte: Failed to load url /src/routes/class.svelte.civet.svelte.js Does the file exist?

• TLDR: runes doenst work in .svelte.civet. And wrapping is making it .svelte.civet.svelte.js. Is it possible to update unplugin or do smth about it so .svelte.civet would work with runes (Svelte compiler)?

[edemaine]

Updating the unplugin should indeed be straightforward! To clarify, I take it you're using the (not really tested) outputExtension setting, and then loadInclude breaks? Do you want to submit a PR or would you rather I take a look? For testing, it would help if you have a version (e.g. branch) that is as intended but doesn't currently work.

[adam2am]

On it, and kinda connected it, it somewhat works, but
I'm new to this, so maybe my approach is messy.

TLDR:
It's working, but only in a runtime.
IDE doesn't recognize typescript imports syntax and syntax of a script lang="civet" within +page.svelte

---

✅ $state and import from .svelte.civet = works, I can use states, it's reactive even within .civet, website works
method = custom unplugin regex + (outputExtension: '.svelte.ts',)

✅❔ script lang="civet" inside of +page.svelte = works,
method = preprocessor with civet dev dependency
but syntax is not being recognized by IDE within +page.svelte, as well as imports

❔IDE recognition issue: typescript imports are not dynamically updating stuff, import modules from .svelte.civet within +page.svelte are not being recognized out of the box and have no idea how to fix it, ?only manually setting up global.d.ts?

❔In vite.config.ts plugins: [ civetVitePlugin ] as any / as unknown as PluginOption, is a temporary workaround; ideally, we’d fix the TypeScript definitions upstream
Also function(): string -> is giving me some messy function () { .... } instead of a string (it was my fault, wrong syntax)

repos:
1- svelte dummy project - https://github.com/adam2am/sv-civet-proof-of-concept
2- forked preprocessor (added civet devdependency) - https://github.com/adam2am/svelte-preprocess-with-civet/ + published it = npm install svelte-preprocess-with-civet
3- forked unplugin changes - f3c5406

Here's what I did:

---

1. In unplugin:

• Updated the Civet file match regex:

- isCivetTranspiled := /(\.civet)(\.[jt]sx)?([?#].*)?$/
+ isCivetTranspiled := /(\.civet)(\.(?:[jt]sx|svelte\.(?:js|ts)))?([?#].*)?$/

• Updated the cleanCivetId function:

- .replace(/\.[jt]sx$/, '')
+ .replace(/\.(?:[jt]sx|svelte\.(?:js|ts))$/, '')

---

2. Built and linked it to my project. In my project:

• vite.config.ts:

import civetVitePlugin from '@danielx/civet/vite';

export default defineConfig({
	plugins: [
		civetVitePlugin({
			outputExtension: '.svelte.js',
			ts: 'esbuild',
		}) as any,
	],
});

---

3. svelte.config.js:

import { sveltePreprocess } from 'svelte-preprocess-with-civet';

const config = {
	preprocess: sveltePreprocess({
		civet: { sync: true },
	}),
};

export default config;

---

Problem/question now:

• Typescript is not dynamic yet, don't know yet what to do here.
• Don't know if my approach really an optimal way to integrate overall cuz I'm a newbie,
• The as any in vite.config.ts is a temporary workaround; ideally, we’d fix the TypeScript definitions upstream
  stringFunction(): string -> is giving me function(){...} instead of a string, is it intended?