Skip to content

Commit b142ec4

Browse files
UpperCodUpperCod
committed
init
0 parents  commit b142ec4

16 files changed

+1987
-0
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
package-lock.json
3+
dist
4+
types

‎.npmignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
*.test.js
3+
*.spec.js

‎README.md

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
## Atomico Starter Skit
2+
3+
Hi, thanks for starting with Atomico js web components in this starter-kit you will find what you need to start with Atomico and if you have questions about Atomico I will gladly solve them through an [Issue](https://github.com/atomicojs/atomico/issues/new/choose), [Discord](https://discord.gg/7z3rNhmkNE) or [Twitter](https://twitter.com/atomicojs).
4+
5+
[![twitter](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/twitter.svg)](https://twitter.com/atomicojs)
6+
[![discord](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/discord.svg)](https://discord.gg/7z3rNhmkNE)
7+
[![documentation](https://raw.githubusercontent.com/atomicojs/docs/master/.gitbook/assets/doc-1.svg)](https://atomico.gitbook.io/doc/)
8+
9+
Now what you have installed is a quick start kit based on Vite, which you can scale for your project, now to continue you must execute the following commands:
10+
11+
1. `npm install`
12+
2. `npm start` : Initialize the development server
13+
3. `npm build` : Optional, Generate a build of your project from the html file [index.html](index.html).
14+
15+
## Workspace
16+
17+
### Recommended structure
18+
19+
```bash
20+
src
21+
|- my-component
22+
| |- my-component.{js,jsx,ts,tsx}
23+
| |- my-component.test.js
24+
| |- README.md
25+
|- components.js # import all components
26+
```
27+
28+
> The `npm run create:component` command, will create a webcomponent with the recommended structure.
29+
30+
## Scripts
31+
32+
### npm run create:component
33+
34+
Create a new webcomponent inside src, according to the recommended structure.
35+
36+
### npm run start
37+
38+
initialize Vite server
39+
40+
### npm run build
41+
42+
package the app using de Vite
43+
44+
### npm run test
45+
46+
Run a test environment in watch mode, as configured in `vite.config.js`.
47+
48+
### npm run coverage
49+
50+
Run a test environment with coverage, as configured in `vite.config.js`.
51+
52+
### npm run exports
53+
54+
Allows you to export your project to npm, this command executes changes in package.json before exporting and the changes will be reverted once exported.
55+
56+
temporary changes are:
57+
58+
1. generation of the packages.json#exports
59+
2. generation of the pages.json#typesVersions
60+
3. Compilation of the files and generation of the types if the --types flag is used.
61+
62+
## frequent questions
63+
64+
### How to add postcss?
65+
66+
`@atomico/vite`, allows to preprocess the css template string through postcss, to use this feature add in vite.config.js the following options:
67+
68+
```js
69+
import atomico from "@atomico/vite";
70+
import { defineConfig } from "vite";
71+
72+
export default defineConfig({
73+
...
74+
plugins: [
75+
atomico({
76+
cssLiterals: { postcss: true }, // 👈 CONFIGURATION TO ADD
77+
}),
78+
],
79+
});
80+
```
81+
82+
To use postcss at least 1 plugin is required.
83+
84+
```json
85+
"postcss": {
86+
"plugins": {
87+
"postcss-import": {}
88+
}
89+
}
90+
```
91+
92+
### How to publish on github page?
93+
94+
Add to `package.json#scripts.build`:
95+
96+
```bash
97+
--outDir docs # modify the destination directory
98+
--base my-repo # github page folder
99+
```

‎index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Atomico - Started</title>
7+
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link rel="stylesheet" href="./src/page.css" />
13+
<script async type="module" src="./src/components.ts"></script>
14+
</head>
15+
<body>
16+
<t-button></t-button>
17+
</body>
18+
</html>

‎package.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "atomico-base",
3+
"description": "a repo to start with atomico",
4+
"meta": {
5+
"id": "vite",
6+
"title": "Started - Atomico + Vite(JS,JSX,TS,TSX)",
7+
"description": "Hassle-free starter template, perfect for starting with Atomico",
8+
"branch": "https://github.com/atomicojs/atomico/tree/2-started/"
9+
},
10+
"workspaces": [
11+
"src/*"
12+
],
13+
"version": "0.0.0",
14+
"private": true,
15+
"type": "module",
16+
"scripts": {
17+
"start": "vite --force",
18+
"build": "vite build",
19+
"test": "vitest",
20+
"coverage": "vitest run --coverage",
21+
"exports": "exports src/components.js --exports --types --main components --publish",
22+
"prepublishOnly": "npm run coverage",
23+
"create:component": "scaff component src"
24+
},
25+
"dependencies": {
26+
"atomico": "latest"
27+
},
28+
"devDependencies": {
29+
"@atomico/exports": "latest",
30+
"@atomico/scaffold": "^0.3.0",
31+
"@atomico/tsconfig": "^1.0.0",
32+
"@atomico/vite": "latest",
33+
"happy-dom": "latest",
34+
"postcss-import": "^14.1.0",
35+
"tailwindcss": "^3.1.8",
36+
"vite": "latest",
37+
"vitest": "latest"
38+
}
39+
}

0 commit comments

Comments
 (0)