{"id":13485113,"url":"https://github.com/crewdevio/Snel","last_synced_at":"2025-03-27T17:30:49.188Z","repository":{"id":37650323,"uuid":"330064114","full_name":"crewdevio/Snel","owner":"crewdevio","description":"A Cybernetical tool for svelte applications on deno","archived":false,"fork":false,"pushed_at":"2024-01-28T18:18:02.000Z","size":2466,"stargazers_count":316,"open_issues_count":4,"forks_count":13,"subscribers_count":14,"default_branch":"main","last_synced_at":"2024-10-30T00:32:02.451Z","etag":null,"topics":["compiler","deno","snel","svelte","svelte3","sveltejs","trex","typescript"],"latest_commit_sha":null,"homepage":"https://crewdevio.mod.land/projects/Snel","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/crewdevio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-01-16T02:02:03.000Z","updated_at":"2024-09-24T10:06:31.000Z","dependencies_parsed_at":"2024-02-19T16:11:22.287Z","dependency_job_id":"1e88d7e6-697b-4822-b382-8d114ef279e6","html_url":"https://github.com/crewdevio/Snel","commit_stats":{"total_commits":136,"total_committers":8,"mean_commits":17.0,"dds":0.08088235294117652,"last_synced_commit":"45f7d13ee6c1828fdd40cba06e857cdb7a0c16d5"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crewdevio%2FSnel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crewdevio%2FSnel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crewdevio%2FSnel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crewdevio%2FSnel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crewdevio","download_url":"https://codeload.github.com/crewdevio/Snel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245892460,"owners_count":20689506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["compiler","deno","snel","svelte","svelte3","sveltejs","trex","typescript"],"created_at":"2024-07-31T17:01:46.415Z","updated_at":"2025-03-27T17:30:49.162Z","avatar_url":"https://github.com/crewdevio.png","language":"TypeScript","readme":"\u003ch1 align=\"center\"\u003eSnel 🦕\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/crewdevio/Snel/main/static/svelte-logo.svg\" width=\"250\"\u003e\n  \u003cp align=\"center\"\u003eA Cybernetical tool for svelte applications on deno in deno (Snel = fast in Nederlands) \u003c/p\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n   \u003ca href=\"https://github.com/crewdevio/Snel/issues\"\u003e\n     \u003cimg alt=\"GitHub issues\" src=\"https://img.shields.io/github/issues/crewdevio/Snel\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://github.com/crewdevio/Snel/network\"\u003e\n     \u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/crewdevio/Snel\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://github.com/crewdevio/Snel/stargazers\"\u003e\n     \u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/crewdevio/Snel\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://github.com/crewdevio/Snel/blob/master/LICENSE\"\u003e\n     \u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/github/license/crewdevio/Snel\"\u003e\n   \u003c/a\u003e\n   \u003ca href=\"https://deno.land\"\u003e\n     \u003cimg src=\"https://img.shields.io/badge/deno-%5E1.9.0-green?logo=deno\"/\u003e\n   \u003c/a\u003e\n\u003c/p\u003e\n\n## What is Snel?\n\nIt is a `tool/framework` to compile .svelte component to javascript files to create web application using deno, vite and svelte\n\n## Main features\n\n- simple setup\n- quick compilation\n- hot reloading\n- [import maps](https://github.com/WICG/import-maps) support (WIP)\n- support for scss and less out of the box (WIP)\n- support for typescript\n- [SSG](docs/ssg.md) (WIP)\n- SSR (WIP)\n\n## What do I need to start using Snel?\n\nthe only thing you need is to run the installation command.\n\n```console\ndeno install -A -n snel https://deno.land/x/snel/install.ts\n```\n\n## how to create a project with Snel?\n\nafter running the installation script you just have to run the create command:\n\n```console\nsnel create [project name]\n```\n\nthen you just have to enter the created project and start the development server\n\n```console\ncd ./[project name]\n\ndeno task start\n```\n\nthis starts your application on a development server in the port you entered in the configuration\n\n## Using svelte core libraries\n\nto use svelte core libraries such as transition, store, motion etc. must be called using the following syntax:\n\n```javascript\nimport { cubicOut } from \"svelte/easing\";\nimport { tweened } from \"svelte/motion\";\nimport { onMount } from \"svelte\";\n```\n\n`svelte` tells the compiler that svelte core resources are being accessed.\n\n## Using import maps\n\nYou can use import maps to reference the dependencies you use, to use import maps from bes have an `import_map.json` file with the following structure:\n\n```json\n{\n  \"imports\": {\n    \"[package name]\": \"[package url]\"\n  }\n}\n```\n\nIn order for the compiler to know that you are using import maps, you need to import the dependencies as follows:\n\n```javascript\nimport moment from \"moment\";\nimport axios from \"axios\";\n```\n\n\u003e **note**: you can use import maps inside svelte components\n\n## Snel config file\n\nsnel uses a configuration file to define different things, like the development server port or add different plugins, this file can be named as `snel.config.js` or `snel.config.ts`.\n\n`example: snel.config.js`\n\n```javascript\nexport default {\n  port: 3000, // development server port\n  mode: \"dom\", // type project \"dom\" | \"ssg\"\n  plugins: [], // plugins must be compatible with rollup deno\n  extendsImportMap: [\n    // extends import map using externas import maps\n    \"https://denopkg.com/crewdevio/Snel-carbon@main/components.map.json\",\n  ],\n};\n```\n\nconfig options:\n\n- port (number): port number for development server\n- mode (string): type project \"dom\" | \"ssg\"\n- plugins (Plugin[ ]): plugins must be compatible with [rollup deno](https://deno.land/x/drollup)\n- extendsImportMap (string[ ]): extends from externas import maps\n\nif you want to use `snel.config.ts` you can import `snelConfig` interface to provide type checking:\n\n`example: snel.config.ts`\n\n```typescript\nimport type { snelConfig } from \"https://deno.land/x/snel/mod.ts\";\n\nexport default \u003csnelConfig\u003e{\n  ...\n};\n```\n\n## Manage import maps dependencies using [trex](https://github.com/crewdevio/Trex)\n\nif you don't have an import map.json file you can create it using the `trex install` command, trex is mainly focused on handling dependencies for `deno` but this doesn't prevent you from being able to use it to handle your dependencies for `snel/svelte`. to install any dependency you just have to use the [custom command](https://github.com/crewdevio/Trex#adding-custom-packages) from trex:\n\n```console\ntrex --custom axios=https://cdn.skypack.dev/axios\n```\n\nthis will install axios and it will make it accessible in the import map file:\n\n```json\n{\n  \"imports\": {\n    \"axios\": \"https://cdn.skypack.dev/axios\"\n  }\n}\n```\n\n\u003e **note**: You should know that your dependencies must be compatible with [es modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) and with the browser, if you refer to some import maps package and it is not found by the compiler, it will not be transformed, so an error will appear in your browser.\n\nwe recommend these sites for you to install your dependencies\n\n- [skypack.dev](https://www.skypack.dev/)\n- [esm.sh](https://esm.sh/)\n- [jsdelivr.com](https://www.jsdelivr.com/)\n\n## Typescript, Sass and Less support\n\nsnel supports typescript out the box, so you can import typescript files into `.svelte` components without specifying the use of typescript within the component.\n\n`App.svelte`\n\n```html\n\u003cscript\u003e\n  import { PI } from \"./pi.ts\";\n\u003c/script\u003e\n\n\u003ch1\u003ePI is = {PI}\u003c/h1\u003e\n\n\u003cstyle\u003e\n  h1 {\n    color: #ff3e00;\n  }\n\u003c/style\u003e\n```\n\n`pi.ts`\n\n```typescript\nexport const PI: number = Math.PI;\n```\n\nSomething important to know is that if you are going to import from typescript files without specifying the use of typescript within the component, you can only import non-types elements, example:\n\n- types\n- interfaces\n\nin case you want to use the typescript inside the components, you just have to specify it in the `lang` attribute:\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import { PI } from \"./pi.ts\";\n\n  const message: string = \"hello world\";\n\n  interface User {\n    name: string;\n    passworld: string;\n  }\n\n  let user: User = { name: \"jhon\", passworld: \"1234\" };\n\u003c/script\u003e\n```\n\nto import types and interfaces into components these must be specified using the following syntax:\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  import type { .... } from \"./types.ts\";\n\u003c/script\u003e\n```\n\nand you should only import types using this syntax and not combine imports with other elements.\n\n```html\n\u003cscript lang=\"ts\"\u003e\n  // bad\n  import type { UserInterface, myFunction } from \"./user.ts\";\n\n  // good\n  import type { UserInterface } from \"./user.ts\";\n  import { myFunction } from \"./user.ts\";\n\u003c/script\u003e\n```\n\n\u003e **note**: typescript support within components is not stable and compilation errors in hot reloading may appear.\n\nin the same way you can use the syntax of sass and less inside the components to define the styles.\n\n```html\n\u003cstyle lang=\"scss\"\u003e\n  /* .... */\n\u003c/style\u003e\n\n\u003c!-- or --\u003e\n\n\u003cstyle lang=\"less\"\u003e\n  /* .... */\n\u003c/style\u003e\n```\n\n\u003e **note**: for now importing external styles is not available for css, sass and less.\n\n## Import components and files\n\nwhen you create a project with snel you will notice that the components are imported as follows:\n\n`example`\n\n```javascript\n// App.svelte\nimport Home from \"@/components/Home.svelte\";\n```\n\n`@/` It is equivalent to `./`, Similarly, if you need to access any component or file that is inside the src folder, you can use the following syntax:\n\n`example`\n\n```javascript\n// src/Users.ts\nexport default class Users {\n  ...\n}\n```\n\n```javascript\n// src/components/views/content/User.svelte\nimport Users from \"~/Users.ts\";\n```\n\nthis would be equivalent to:\n\n```javascript\nimport Users from \"../../../Users.ts\";\n```\n\nsummary:\n\n- `@/`\n  - equivalent to `./`\n- `~/`\n  - equivalent to `[current work directory]/src/`\n- `$/`\n  - equivalent to `[current work directory]/`\n\nthis syntax can be used in javascript, typescript files and components.\n\n\u003e **note**: you can change the behavior by rewriting the pattern inside the import_map.json file, although be careful when doing this.\n\n## Deploy SPA app\n\nIf you want to have a simple workflow to deploy your SPA application, you can use this.\n\n`deploy`\n\n```yml\nname: Build and Deploy\non:\n  push:\n    branches:\n      - main\njobs:\n  build:\n    runs-on: windows-latest\n    steps:\n      - name: Checkout 🛎️\n        uses: actions/checkout@v2.3.1\n\n      - name: Install Deno\n        uses: denolib/setup-deno@v2\n        with:\n          deno-version: v1.x\n\n      - name: Build\n        run: |\n          deno run --allow-run --allow-read https://deno.land/x/snel/install.ts\n          trex run build\n      - name: Upload Artifacts 🔺\n        uses: actions/upload-artifact@v1\n        with:\n          name: site\n          path: dist\n\n  deploy:\n    needs: [build]\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout 🛎️\n        uses: actions/checkout@v2.3.1\n\n      - name: Download Artifacts 🔻\n        uses: actions/download-artifact@v1\n        with:\n          name: site\n\n      - name: Deploy 🚀\n        uses: JamesIves/github-pages-deploy-action@4.1.4\n        with:\n          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}\n          branch: deploy\n          folder: \"site\"\n          clean-exclude: |\n            vercel.json\n            manifest.json\n```\n\nthis compiles the application every time it is pushed to the `main` branch, and uploads the compiled files to the `deploy` branch, which could be deployed in hosts such as `vercel` or `netlify`.\n\nIf you are using the snel client router and you are going to deploy vercel or netlify you must add the respective configuration files to avoid having 404 errors.\n\n`for vercel: vercel.json`\n\n```json\n{\n  \"routes\": [\n    { \"handle\": \"filesystem\" },\n    { \"src\": \"/.*\", \"dest\": \"/index.html\" }\n  ]\n}\n```\n\n`for netlify: _redirects`\n\n```console\n/*   /index.html   200\n```\n\nto avoid this files was removed in each deploy, you can ignore specific files:\n\n```yml\n....\n      - name: Deploy 🚀\n        uses: JamesIves/github-pages-deploy-action@4.1.4\n        with:\n          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}\n          branch: deploy\n          folder: \"site\"\n          clean-exclude: |\n            vercel.json # \u003c- ignore vercel.json and manifest.json file\n            manifest.json\n```\n\nfor github pages you can use this trick:\n\ncreate a `404.html` file:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\" /\u003e\n  \u003ctitle\u003e....\u003c/title\u003e\n  \u003cscript\u003e\n    sessionStorage.redirect = location.href;\n  \u003c/script\u003e\n  \u003cmeta http-equiv=\"refresh\" content=\"0;URL='/sghpa'\"\u003e\u003c/meta\u003e\n\u003c/head\u003e\n  \u003cbody\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n    \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n    \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nand in your `index.html` add this:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003ctitle\u003e....\u003c/title\u003e\n    \u003cstyle type=\"text/css\"\u003e\n      body:before {\n        content: attr(message);\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    .....\n    \u003cscript\u003e\n      (() =\u003e {\n        const redirect = sessionStorage.redirect;\n        delete sessionStorage.redirect;\n        if (redirect \u0026\u0026 redirect !== location.href) {\n          history.replaceState(null, null, redirect);\n          // REMOVE THIS - just showing the redirect route in the UI\n          document.body.setAttribute(\n            \"message\",\n            \"This page was redirected by 404.html, from the route: \" + redirect\n          );\n        } else {\n          // REMOVE THIS - just showing the redirect route in the UI\n          document.body.setAttribute(\n            \"message\",\n            \"This page was loaded directly from the index.html file\"\n          );\n        }\n      })();\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Hot Reloading\n\nSnel provides hot reload capability, it compiles and updates the application when changes are applied to it\n\n`example`\n\n![img hot reload](https://raw.githubusercontent.com/crewdevio/Snel/main/static/hotreloading.gif)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrewdevio%2FSnel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrewdevio%2FSnel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrewdevio%2FSnel/lists"}