Skip to content

Commit 45f7d13

Browse files
buttercubzbuttercubz
authored
refactor(WIP): migrate to vite (#61)
* refactor(WIP): migrate to vite * feat: setup vitejs
1 parent 067baa2 commit 45f7d13

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+318
-5205
lines changed

‎README.md

+39-63
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<p align="center">
44
<img src="https://raw.githubusercontent.com/crewdevio/Snel/main/static/svelte-logo.svg" width="250">
5-
<p align="center">A Cybernetical compiler for svelte applications in deno (Snel = fast in Nederlands) </p>
5+
<p align="center">A Cybernetical tool for svelte applications on deno in deno (Snel = fast in Nederlands) </p>
66
</p>
77

88
<p align="center">
@@ -25,54 +25,25 @@
2525

2626
## What is Snel?
2727

28-
It is a `tool/framework` to compile .svelte component to javascript files to create web application using deno and svelte
28+
It is a `tool/framework` to compile .svelte component to javascript files to create web application using deno, vite and svelte
2929

3030
## Main features
3131

3232
- simple setup
3333
- quick compilation
3434
- hot reloading
35-
- [import maps](https://github.com/WICG/import-maps) support
36-
- support for scss and less out of the box
35+
- [import maps](https://github.com/WICG/import-maps) support (WIP)
36+
- support for scss and less out of the box (WIP)
3737
- support for typescript
38-
- [SSG](docs/ssg.md) (experimental)
39-
- SSR (soon)
38+
- [SSG](docs/ssg.md) (WIP)
39+
- SSR (WIP)
4040

4141
## What do I need to start using Snel?
4242

4343
the only thing you need is to run the installation command.
4444

4545
```console
46-
deno run --allow-run --allow-read https://deno.land/x/snel/install.ts
47-
```
48-
49-
> wait wait! Why should I run a script instead of using deno install to install Snel?
50-
51-
Snel uses several tools to create a better development experience, some of these tools are:
52-
53-
- [**trex**](https://github.com/crewdevio/Trex) to handle scripts and compilation in watch mode.
54-
- [**bundler**](https://deno.land/x/bundler) minify and package all files for production
55-
56-
the [install.ts](https://github.com/crewdevio/Snel/blob/main/install.ts) file is responsible for installing all these tools so that you only worry about creating your application.
57-
58-
if you not want install snel, you can execute it using [trex](https://deno.land/x/trex)
59-
60-
```console
61-
trex exec snel create [project name]
62-
```
63-
64-
> **note**: if you decide use snel using trex exec you need to change this scripts inside run.json file
65-
66-
```javascript
67-
{
68-
"scripts": {
69-
"start": "trex exec snel serve",
70-
"build": "trex exec snel build"
71-
},
72-
"files": [
73-
"./src"
74-
]
75-
}
46+
deno install -A -n snel https://deno.land/x/snel/install.ts
7647
```
7748

7849
## how to create a project with Snel?
@@ -88,7 +59,7 @@ then you just have to enter the created project and start the development server
8859
```console
8960
cd ./[project name]
9061

91-
trex run start
62+
deno task start
9263
```
9364

9465
this starts your application on a development server in the port you entered in the configuration
@@ -440,36 +411,41 @@ create a `404.html` file:
440411

441412
and in your `index.html` add this:
442413

443-
444414
```html
445415
<!DOCTYPE html>
446416
<html lang="en">
447-
<head>
448-
<meta charset="utf-8" />
449-
<title>....</title>
450-
<style type="text/css">
451-
body:before {
452-
content: attr(message);
453-
}
454-
</style>
455-
</head>
456-
<body>
457-
.....
458-
<script>
459-
(() => {
460-
const redirect = sessionStorage.redirect;
461-
delete sessionStorage.redirect;
462-
if (redirect && redirect !== location.href) {
463-
history.replaceState(null, null, redirect);
464-
// REMOVE THIS - just showing the redirect route in the UI
465-
document.body.setAttribute('message', 'This page was redirected by 404.html, from the route: ' + redirect);
466-
} else {
467-
// REMOVE THIS - just showing the redirect route in the UI
468-
document.body.setAttribute('message', 'This page was loaded directly from the index.html file');
417+
<head>
418+
<meta charset="utf-8" />
419+
<title>....</title>
420+
<style type="text/css">
421+
body:before {
422+
content: attr(message);
469423
}
470-
})();
471-
</script>
472-
</body>
424+
</style>
425+
</head>
426+
<body>
427+
.....
428+
<script>
429+
(() => {
430+
const redirect = sessionStorage.redirect;
431+
delete sessionStorage.redirect;
432+
if (redirect && redirect !== location.href) {
433+
history.replaceState(null, null, redirect);
434+
// REMOVE THIS - just showing the redirect route in the UI
435+
document.body.setAttribute(
436+
"message",
437+
"This page was redirected by 404.html, from the route: " + redirect
438+
);
439+
} else {
440+
// REMOVE THIS - just showing the redirect route in the UI
441+
document.body.setAttribute(
442+
"message",
443+
"This page was loaded directly from the index.html file"
444+
);
445+
}
446+
})();
447+
</script>
448+
</body>
473449
</html>
474450
```
475451

‎cli.ts

+12-80
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,16 @@
66
*
77
*/
88

9-
import { common, resolverConfigFile, showHelp } from "./src/shared/utils.ts";
109
import { CommandNotFound, HelpCommand } from "./src/shared/log.ts";
11-
import { notFoundConfig, PromptConfig } from "./src/cli/prompt.ts";
12-
import { VERSION as svelteVersion } from "./compiler/compiler.ts";
1310
import { VERSION as cliVersion } from "./src/shared/version.ts";
1411
import { flags, keyWords } from "./src/shared/utils.ts";
1512
import { CreateProject } from "./src/cli/create.ts";
16-
import StartDev from "./src/cli/commands/start.ts";
17-
import { RollupBuild } from "./compiler/build.ts";
18-
import Build from "./src/cli/commands/build.ts";
13+
import { PromptConfig } from "./src/cli/prompt.ts";
14+
import { showHelp } from "./src/shared/utils.ts";
1915
import { colors } from "./imports/fmt.ts";
2016

2117
const { args: Args } = Deno;
22-
type Command = "create" | "serve" | "dev" | "build";
18+
type Command = "create";
2319
const command = Args[0] as Command;
2420

2521
const instructs = {
@@ -33,97 +29,33 @@ const instructs = {
3329
},
3430
flags: [{ alias: flags.help, description: "show command help" }],
3531
});
36-
}
37-
38-
else await CreateProject({ ...PromptConfig(), projectName: Args[1] });
39-
},
40-
// compile an bundle for production
41-
async build() {
42-
if (flags.help.includes(Args[1])) {
43-
return HelpCommand({
44-
command: {
45-
alias: [keyWords.build],
46-
description: "build application for production",
47-
},
48-
flags: [{ alias: flags.help, description: "show command help" }],
49-
});
50-
}
51-
52-
else if (await resolverConfigFile()) await Build();
53-
54-
else notFoundConfig();
55-
},
56-
// compile in dev mode
57-
async dev() {
58-
if (flags.help.includes(Args[1])) {
59-
return HelpCommand({
60-
command: {
61-
alias: [keyWords.build],
62-
description: "build application in dev mode",
63-
},
64-
flags: [{ alias: flags.help, description: "show command help" }],
65-
});
66-
}
67-
68-
else if (await resolverConfigFile()) {
69-
console.time(colors.green("Compiled successfully in"));
70-
await RollupBuild({ dir: common.dom.dir, entryFile: common.entryFile });
71-
console.timeEnd(colors.green("Compiled successfully in"));
72-
Deno.exit(0);
73-
}
74-
75-
else notFoundConfig();
76-
},
77-
// start dev server
78-
async serve() {
79-
if (flags.help.includes(Args[1])) {
80-
return HelpCommand({
81-
command: {
82-
alias: [keyWords.serve],
83-
description: "build and server in a dev server",
84-
},
85-
flags: [{ alias: flags.help, description: "show command help" }],
86-
});
87-
}
88-
89-
else if (await resolverConfigFile()) await StartDev();
90-
91-
else notFoundConfig();
32+
} else await CreateProject({ ...PromptConfig(), projectName: Args[1] });
9233
},
9334
};
9435

9536
async function Main() {
9637
try {
9738
// execute instructions
98-
if (instructs[command]) {
99-
return await instructs[command]();
39+
if (command === "create") {
40+
return await instructs.create();
10041
}
10142

10243
// show version
10344
else if (flags.version.includes(Args[0])) {
10445
console.log(
10546
colors.green(
106-
`snel: ${colors.yellow(cliVersion)}\nsvelte: ${
107-
colors.yellow(
108-
svelteVersion,
109-
)
110-
}\ndeno: ${colors.yellow(Deno.version.deno)}`,
111-
),
47+
`snel: ${colors.yellow(cliVersion)}\ndeno: ${colors.yellow(
48+
Deno.version.deno
49+
)}`
50+
)
11251
);
11352
}
11453
// show help
11554
else if (flags.help.includes(Args[0]) || !Args[0]) {
11655
showHelp();
117-
}
118-
119-
else {
56+
} else {
12057
CommandNotFound({
121-
commands: [
122-
keyWords.build,
123-
keyWords.create,
124-
keyWords.dev,
125-
keyWords.serve,
126-
],
58+
commands: [keyWords.create],
12759
flags: [...flags.help, ...flags.version],
12860
});
12961
}

‎compiler/README.md

-35
This file was deleted.

‎compiler/build.ts

-69
This file was deleted.

0 commit comments

Comments
 (0)