├── .clj-kondo └── config.edn ├── .gitignore ├── .npmrc ├── README.md ├── bb.edn ├── package-lock.json ├── package.json ├── src ├── app.html ├── components │ └── Nested.svelte ├── macros.cljc └── routes │ ├── +page.svelte │ └── home.script.cljs ├── static └── favicon.png ├── svelte.config.js ├── tasks.bb └── vite.config.js /.clj-kondo/config.edn: -------------------------------------------------------------------------------- 1 | {:lint-as {macros/defreactive clojure.core/def}} 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | vite.config.js.timestamp-* 10 | vite.config.ts.timestamp-* 11 | .clj-kondo/.cache/v1/lock 12 | .clj-kondo/.cache/v1/cljs/example.transit.json 13 | .idea/.gitignore 14 | .idea/misc.xml 15 | .idea/modules.xml 16 | .idea/vcs.xml 17 | .lsp/.cache/db.transit.json 18 | cljs-svelte-kit.iml 19 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-cljs 2 | Using [squint](https://github.com/squint-cljs/squint) and Svelte. 3 | 4 | ## How does it work? 5 | This repo defines a [svelte preprocessor](https://kit.svelte.dev/docs/integrations#preprocessors) for cljs which allows you to use clojurescript within ` 7 | 8 |

The answer is {answer}

9 |

And the doubled answer is: {doubled}

10 | -------------------------------------------------------------------------------- /src/macros.cljc: -------------------------------------------------------------------------------- 1 | (ns macros) 2 | 3 | (defmacro defreactive [name init] 4 | `(js* "$: ~{} = ~{}" ~name ~init)) -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 |

The Famous Cats of Narnia

5 | 6 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/routes/home.script.cljs: -------------------------------------------------------------------------------- 1 | (ns routes.home.script 2 | #_{:clj-kondo/ignore [:unused-namespace]} 3 | (:require ["../components/Nested.svelte$default" :as Nested]) 4 | (:require-macros [macros :refer [defreactive]])) 5 | 6 | (def cats []) 7 | 8 | (defreactive answer (* 2 (count cats))) 9 | 10 | (defn addCat [] 11 | (let [new-cat-id (+ 1 (count cats)) 12 | new-cat {:id 1 :name "Danger Cat"}] 13 | (set! cats (conj! cats new-cat)))) -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dangercoder/svelte-cljs-example/9a36327b976290f2a49542baaa29ce43cfa469f9/static/favicon.png -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/kit/vite' 3 | import sveltePreprocess from 'svelte-preprocess'; 4 | import { compileString } from 'squint-cljs' 5 | 6 | /** @type {import('@sveltejs/kit').Config} */ 7 | const config = { 8 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 9 | // for more information about preprocessors 10 | 11 | preprocess: [vitePreprocess(), 12 | sveltePreprocess({ 13 | aliases: [ 14 | ['cljs', 'clojurescript'], 15 | ], 16 | /** Add a custom language preprocessor */ 17 | cljs({ content, filename, attributes }) { 18 | 19 | var code = compileString(content); 20 | 21 | return {code}; 22 | }, 23 | })], 24 | 25 | kit: { 26 | adapter: adapter() 27 | } 28 | }; 29 | 30 | export default config; 31 | -------------------------------------------------------------------------------- /tasks.bb: -------------------------------------------------------------------------------- 1 | (ns tasks 2 | (:require 3 | [babashka.tasks :refer [shell]] 4 | [babashka.fs :as fs] 5 | [clojure.string :as str])) 6 | 7 | (defn compile-squint 8 | "Compiles all squint files to .js" 9 | [{:keys []}] 10 | (println "Compiling squint files") 11 | (doseq [path (fs/glob "src" "**{.cljs,cljc}")] 12 | (shell (format "node node_modules/.bin/squint compile %s --extension .js" path)))) 13 | 14 | (defn watch-cljs [{:keys []}] 15 | (let [watch (requiring-resolve 'pod.babashka.fswatcher/watch)] 16 | (watch "src" 17 | (fn [{:keys [type path]}] 18 | (when 19 | (and (#{:write :write|chmod} type) 20 | (or (str/ends-with? path ".cljs") 21 | (str/ends-with? path ".cljc"))) 22 | (shell {:continue true} (format "node node_modules/.bin/squint compile %s --extension .js" path)))) 23 | {:recursive true}) 24 | @(promise))) -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import sveltePreprocess from 'svelte-preprocess'; 3 | 4 | /** @type {import('vite').UserConfig} */ 5 | const config = { 6 | plugins: [sveltekit()] 7 | }; 8 | 9 | export default config; 10 | --------------------------------------------------------------------------------