crewdevio / snel Goto Github PK

I would like to use snel with tailwind css. I was wondering if this project can be combined with postcss. I know there is a postcss deno package already, but I am not sure about how to implement the package to also work with hrm.

If I run:

snel create myproject

snel fails to create a project with this error message:

error: Uncaught TypeError: Yl.plugin is not a function
    at https://cdn.esm.sh/v65/[email protected]/deno/autoprefixer.js:57:351
    at https://cdn.esm.sh/v65/[email protected]/deno/autoprefixer.js:2:9145
    at https://cdn.esm.sh/v65/[email protected]/deno/autoprefixer.js:57:1697

OS: Arch Linux x86_64
Kernel: 5.14.10
deno version: deno 1.17.1 (release, x86_64-unknown-linux-gnu),
v8 9.7.106.15
typescript 4.5.2

Hey sorry very much, this is not an issue but an act of ignorance. How to add Tailwind CSS in snel?

planned features and refactors:

• create and build SPA projects
• sass and less support
• import maps support
• plugins support by (drollup)
• typescript support (experimental)
• SSG and SSR support
• postcss support
• netlify, vercel, heroku etc. support
• deno deploy support
• binary self contained support for SSG and SSR mode

maybe

• use or support esbuild for typescript transpilation

if you want add others stuff in snel you can reply this issue

How does this differ from what we would have if there was a Deno adapter for SvelteNext similar to the existing Node adapter?

import see highlighted code:

P.S. We love what you guys are doing for svelte and deno :)

I'm looking forward to use snel for my upcoming book on Deno. I'm not versed with svelte and will learn it along. Please do recommend some UI libraries I can try with snel.

P.S. Should we enable discussions tab so these questions can be asked there?

As #4 said, importing svelte/store causes an error.

stores.js:

import { writable } from 'svelte/store'

export const store = writable(0)

When you add import { store } from '$/stores.js' to any .svelte file... the app crash and gives "NotFound"

By the way, importing from https://cdn.skypack.dev/svelte/store doesn't work. Same result.

Basically importing doesn't work in a .js file. And this must be stores.js not stores.svelte! it's not a component

Looks like hostname is not the same everywhere, the one installed with archlinux doesn't have -I it has -i instead to show local ip

hostname --version

hostname (GNU inetutils) 2.2
Copyright (C) 2021 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <https://gnu.org/licenses/gpl.html>.
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

Written by Debarshi Ray.

running deno run --allow-run --allow-read -r https://deno.land/x/snel/install.ts hangs

Warning Implicitly using latest version (v0.7.1) for https://deno.land/x/snel/cli.ts

I'm getting the following error while running the installation command.

$ deno run --allow-run --allow-read https://deno.land/x/snel/install.ts
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=imports/optimized/svelte/store.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=imports/optimized/svelte/motion.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=imports/optimized/svelte/animate.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=imports/optimized/common/global-5c50bad9.js
Check https://deno.land/x/snel/install.ts
error: Import 'https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=imports/optimized/svelte/animate.js' failed: 525 <unknown status code>
    at https://cdn.skypack.dev/[email protected]/animate:15:0

use esbuild deno to build in dev mode, this reduce will the hot reload time.

necessary things:

• svelte plugin transform
• import maps plugin
• remote import plugin

useful info:

• https://github.com/trygve-lie/esbuild-plugin-import-map
• https://github.com/EMH333/esbuild-svelte/blob/main/index.ts
• https://deno.land/x/esbuild
• https://deno.land/x/[email protected]

A nice to have feature would be to be able to reverse proxy a fixed route in the dev server.

ie: /api points to http://localhost:8888/api or just a bare server... if the prefix route/slice exists on both sides, it should be declared on both sides, if a trailing slash is used on either side, it should be used on both sides.

When I tend to deploy applications, they're usually sliced off via na ingress server with things like /auth or /api pointing to another resource on the ingress host... this is difficult to replicate if the dev server doesn't also allow a reverse proxy.

Nice to have would be https support for the proxied server, since one may want to target a live API when developing an application.

When creating an example app via snel create myapp and then running trex run build it will fail with the follow output:

$ trex run build
preparing files for production.

Entry public/__index.html
Error: public/global.css: R.default.comma is not a function
    at CssPlugin.createAsset (https://deno.land/x/[email protected]/plugins/css/css.ts:87:13)
    at async Bundler.createAsset (https://deno.land/x/[email protected]/bundler.ts:155:23)
    at async Bundler.createGraph (https://deno.land/x/[email protected]/bundler.ts:251:17)
    at async Bundler.bundle (https://deno.land/x/[email protected]/bundler.ts:621:19)
    at async Dist (https://deno.land/x/[email protected]/src/cli/prepare.ts:54:23)
    at async Build (https://deno.land/x/[email protected]/src/cli/commands/build.ts:33:5)
    at async Object.build (https://deno.land/x/[email protected]/cli.ts:52:42)
    at async Main (https://deno.land/x/[email protected]/cli.ts:99:14)
    at async https://deno.land/x/[email protected]/cli.ts:138:3

I narrowed it down to the following css rule, the parens seem to be the issue.

button:not(:disabled):active {
  background-color: #ddd;
}

This is probably a bug in "Deno Bundler" but that github repo does not have issues enabled and the original that it was forked from seems to not be maintained anymore. I'm not sure what can be done in this case. Are there maybe alternatives to "Deno Bundler"?

Trying to install snel on my windows machine getting following failure -

S C:> deno run --allow-run --allow-read https://deno.land/x/snel/install.ts
error: Module not found "https://denopkg.com/buttercubz/deno-rollup@next/plugins/terser/mod.ts".
at https://deno.land/x/[email protected]/src/shared/internal_plugins.ts:13:24
installation complete.

PS C:> deno --version
deno 1.31.1 (release, x86_64-pc-windows-msvc)
v8 11.0.226.13
typescript 4.9.4

Running on my m1 mac:

» deno --version
deno 1.22.0 (release, aarch64-apple-darwin)
v8 10.0.139.17
typescript 4.6.2

Install failure log

» deno run --allow-run --allow-read -r https://deno.land/x/snel/install.ts
Download https://deno.land/x/snel/install.ts
Warning Implicitly using latest version (v0.7.1) for https://deno.land/x/snel/install.ts
Download https://deno.land/x/[email protected]/install.ts
Download https://cdn.skypack.dev/[email protected]/animate
Download https://cdn.skypack.dev/[email protected]/easing
Download https://cdn.skypack.dev/[email protected]/internal
Download https://cdn.skypack.dev/[email protected]/motion
Download https://cdn.skypack.dev/[email protected]/store
Download https://cdn.skypack.dev/[email protected]/transition
Download https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/svelte/transition.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/svelte/motion.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/svelte/animate.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/svelte/easing.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/svelte/internal.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/svelte/store.js
Download https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/common/global-5c50bad9.js
Check https://deno.land/x/snel/install.ts
Warning Implicitly using latest version (v0.7.1) for https://deno.land/x/snel/cli.ts
error: Module not found "https://denopkg.com/buttercubz/deno-rollup@next/plugins/terser/mod.ts".
    at https://deno.land/x/[email protected]/src/shared/internal_plugins.ts:13:24
Warning Implicitly using latest version (v1.11.0) for https://deno.land/x/trex/import_map.json
Warning Implicitly using latest version (v1.11.0) for https://deno.land/x/trex/cli.ts
Warning Implicitly using latest version (v1.11.0) for https://deno.land/x/trex/utils/types.ts
Warning Implicitly using latest version (0.140.0) for https://deno.land/std/fmt/colors.ts
✅ Successfully installed trex
/Users/j/.deno/bin/trex
installation complete.

Snel + Trex attempt:

» export PATH="/Users/j/.deno/bin:$PATH"

» snel
zsh: command not found: snel

» trex exec snel create name
error: Module not found "https://denopkg.com/buttercubz/deno-rollup@next/plugins/terser/mod.ts".
    at https://deno.land/x/[email protected]/src/shared/internal_plugins.ts:13:24
error: Uncaught (in promise) something went wrong while running snel

Any suggestions?

How do I use third-party Svelte components with Snel?

For example, I'd love to use https://www.npmjs.com/package/svelte-spa-router/

In npm-based Svelte, I'd just npm install --save that dependency, and then I could import it by name. I tried importing it via esm.sh and others but they don't seem to be able to make a module out of its Router.svelte file.

I cannot install snel with install.ts. I get an error error: Module not found "https://denopkg.com/buttercubz/deno-rollup@next/plugins/terser/mod.ts". at https://deno.land/x/[email protected]/src/shared/internal_plugins.ts:13:24 error: Uncaught (in promise) "\x1b[31msomething went wrong while running \x1b[33msnel\x1b[31m\x1b[39m

Hi!

I really like Deno for its cleanliness and simplicity. Deno is very nice to work with after the bottomless node_modules folder and endless package.json on Node.js.

But Snel has an unprecedented list of dependencies for Deno projects.
Dependencies include large parts of the standard library: 102, 99, 100, 66, 65, 62, 98, 97, 85 version...
Much of this duplicates itself.
A total of 25 megabytes worth of dependencies...

Are you going to fix it?

What do you think about:

• Esbuild bundler
• Svelte-esbuild plugin
• Esbuild-svelte starter with simple http server
• Esbuild-svelte starter with simple dev server

when i try to install snel with deno run --allow-run --allow-read https://deno.land/x/[email protected]/install.ts it gives me an error:

NotFound: System cannot find specified file (os error 2)
    at deno:core/core.js:86:46
    at unwrapOpResult (deno:core/core.js:106:13)
    at Object.opSync (deno:core/core.js:120:12)
    at opRun (deno:runtime/js/40_process.js:20:17)
    at Object.run (deno:runtime/js/40_process.js:104:17)
    at install (https://deno.land/x/[email protected]/install.ts:10:24)
    at Main (https://deno.land/x/[email protected]/install.ts:24:9)
    at https://deno.land/x/[email protected]/install.ts:29:3

System: Windows 10
Terminal: Powershell
Deno Version: 1.10.3

Hi,
using latest version deno, chrome, windows10,...
There is an issue with installing ...snel/install.ts
It seems that 2 files are deprecated, missing, etc...

error: Import 'https://esm.sh/v86/[email protected]/deno/postcss-nesting.js'
failed: 500 Internal Server Error at https://esm.sh/v86/[email protected]/deno/postcss-preset-env.js:2:2086

For example removing '@7.0.1' from the link will make this version available '[email protected] '

Setup:
latest versions of windows10 x64, bash mingw64...
deno 1.23.1 (release, x86_64-pc-windows-msvc)
v8 10.4.132.8
typescript 4.7.2

When run deno run --allow-run https://deno.land/x/snel/install.ts nothing happens 🤷🏻‍♂️

... e.g.
link rel="stylesheet" href="/... instead of
link rel="stylesheet" href="./...

this is not a problem if we serve the page e.g. via https://deno.land/x/opine --> it is however a problem if we serve the page via github pages or via visual studio code live server, ...?

I guess there is no hope to get tailwind working with Deno projects -- sucks becasue I can't live without this lib for front end work.

Hi Snel Community.

First of all: Congratulations!! I love Snel.

I use it in some fun open source projects with some of my students.

We are wondering what would be the best way to use assets like https://illright.github.io/attractions/ or svelte-frappe-charts via Snel...

I tried

trex --custom svelte-frappe-charts=https://cdn.skypack.dev/svelte-frappe-charts

which lead to

Could anyone give us any hints on that?

Michael

When installing under Windows 10 the installation script partly fails:

...
Warning Implicitly using latest version (v1.8.0) for https://deno.land/x/trex/import_map.json
Warning Implicitly using latest version (v1.8.0) for https://deno.land/x/trex/cli.ts
Warning Implicitly using latest version (0.105.0) for https://deno.land/std/fmt/colors.ts
**error: The filename, directory name, or volume label syntax is incorrect. (os error 123)**
installation complete.

Whereas under Linux the installation goes well:

...
Warning Implicitly using latest version (v1.8.0) for https://deno.land/x/trex/import_map.json
Warning Implicitly using latest version (v1.8.0) for https://deno.land/x/trex/cli.ts
Warning Implicitly using latest version (v1.8.0) for https://deno.land/x/trex/utils/types.ts
Warning Implicitly using latest version (0.105.0) for https://deno.land/std/fmt/colors.ts
✅ Successfully installed trex
/home/ritsaert/.deno/bin/trex
installation complete.

Hello,

I'm trying out snel and when importing a module that contains top level awaits I'm getting the following error:

> snel build

.
.
.

SyntaxError: Unexpected await identifier inside strict mode
    at js_error (https://unpkg.com/[email protected]/dist/bundle.min.js:538:11)
    at croak (https://unpkg.com/[email protected]/dist/bundle.min.js:1251:9)
    at token_error (https://unpkg.com/[email protected]/dist/bundle.min.js:1259:9)
    at maybe_unary (https://unpkg.com/[email protected]/dist/bundle.min.js:3223:17)
    at expr_ops (https://unpkg.com/[email protected]/dist/bundle.min.js:3285:24)
    at maybe_conditional (https://unpkg.com/[email protected]/dist/bundle.min.js:3290:20)
    at maybe_assign (https://unpkg.com/[email protected]/dist/bundle.min.js:3367:20)
    at expression (https://unpkg.com/[email protected]/dist/bundle.min.js:3390:24)
    at simple_statement (https://unpkg.com/[email protected]/dist/bundle.min.js:1553:55)
    at statement (https://unpkg.com/[email protected]/dist/bundle.min.js:1366:19)

I tracked this down to the deno-rollup project and got a fixed merged into the origin project here: https://github.com/cmorten/deno-rollup/issues/41

I see snel actually has a dependency on https://denopkg.com/buttercubz/deno-rollup@improve-perfomance and that the improve-performance branch has deviated from the origin project.

I'd like to get that patch in the origin project into the snel dependency.

I'm happy to work on it but could use some guidance wrt buttercubz/deno-rollup@improve-perfomance and the direction to take.

Import 'https://cdn.esm.sh/v44/[email protected]/deno/webidl-conversions.js' failed: 500 Internal Server Error
at https://cdn.esm.sh/v44/[email protected]/deno/whatwg-url.js:1:0

Getting following error after running new snel project on WSL

What exactly does this project do compared to the normal use of svelte compiler? What are its advantages?

Problem: I ran the installation command on my M1 Macbook Air:
deno run --allow-run --allow-read https://deno.land/x/snel/install.ts

and got the following error message:

error: Import 'https://denopkg.com/crewdevio/tools@main/tty/mod.ts' failed: 504 Gateway Timeout
    at https://denopkg.com/crewdevio/tools@main/wait/deps.ts:2:22
installation complete.

Solution: I ran this command again and it worked.

Suggestion: I understand this is a gateway timeout so you might want to add a few retries before returning an error message to the user.

terminal tab gets reset without any output after running the script

Please consider adding a discord channel for this project. Will help a lot with community building and answering simple questions.

I just keep on getting this strange error message time and again while running via trex run start The server and the page can be reloaded and it'll be working fine for some moments while it stops to work after sometime.

  Compiled successfully!

  You can now view vui in the browser.

      Local:            http://localhost:2324
      

  Note that the development build is not optimized.
  To create a production build, use trex run build.
  
error: Uncaught (in promise) BrokenPipe: Broken pipe (os error 32)
          numBytesWritten = await this.#writer.write(data);
                            ^
    at async write (deno:ext/net/01_net.js:26:12)
    at async BufWriter.write (https://deno.land/[email protected]/io/buffer.ts:783:29)
    at async writeResponse (https://deno.land/[email protected]/http/_io.ts:281:15)
    at async ServerRequest.respond (https://deno.land/[email protected]/http/server_legacy.ts:98:7)

Our application needs a store. I am used to writing this in a separate store.js file. However, the moment I tried to implement a store.js file I got the following error: 'svelte/store' is imported by store.js, but could not be resolved – treating it as an external dependency.

EDIT: For completion, a minimal example:

App.svelte:

<script>
  import { currentId } from "./store.js";
</script>

{$currentId}

store.js:

import { writable } from "svelte/store";
export const currentId = writable(0);

This will produce the error mentioned above.

Changes reflected only after server restart

Versions:
snel: 0.5.1
svelte: 3.38.1
deno: 1.11.0

when lang="ts" attribute is present imported component throw error:
Reproduction:

<script lang="ts">
  import ComponentName from "@/components/ComponentName.svelte";
</script>

<ComponentName />

Error message:

Uncaught TypeError: Failed to construct 'ComponentName': The object must have a callable @@iterator property.

I'm getting above error while installing snel on WSL using following command:

deno run --allow-run --allow-read https://deno.land/x/snel/install.ts