dsluijk
/
teenyui
1
1
Fork 0
Code Issues 0 Pull Requests 0 Releases 15 Activity
Browse Source

feat: change the bundler to microbundle

tags/0.1.2
Dany Sluijk 2 years ago
parent
9d35437b99
commit
1ab058f7e0
Signed by: dsluijk GPG Key ID: EEEBA79CCB6729B0
24 changed files with 85 additions and 94 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -3
      .editorconfig
  2. +1
    -1
      .eslintrc.json
  3. +2
    -3
      .gitignore
  4. +6
    -0
      .npmignore
  5. +0
    -11
      .postcssrc
  6. +1
    -1
      .stylelintrc.json
  7. +3
    -9
      example/package.json
  8. +4
    -5
      example/src/Main.tsx
  9. +4
    -4
      example/src/global.scss
  10. +8
    -8
      example/src/index.html
  11. +2
    -2
      example/src/index.tsx
  12. +1
    -2
      example/tsconfig.json
  13. +11
    -10
      package.json
  14. +2
    -2
      src/button/index.tsx
  15. +11
    -11
      src/button/style.scss
  16. +4
    -0
      src/gobal.d.ts
  17. +2
    -0
      src/index.ts
  18. +5
    -5
      src/layout/header/index.tsx
  19. +1
    -1
      src/layout/header/style.scss
  20. +2
    -2
      src/layout/layout/index.tsx
  21. +3
    -3
      src/layout/layout/style.scss
  22. +4
    -4
      src/theme/dark.scss
  23. +4
    -4
      src/theme/light.scss
  24. +3
    -3
      tsconfig.json

+ 1
- 3
.editorconfig View File

@@ -3,7 +3,5 @@ root = true
[*]
end_of_line = lf
insert_final_newline = true
indent_style = tab

[*.{yml,yaml}]
indent_style = space
indent_size = 2

+ 1
- 1
.eslintrc.json View File

@@ -44,7 +44,7 @@
"func-style": "error",
"implicit-arrow-linebreak": "error",
"indent": "off",
"@typescript-eslint/indent": ["error", "tab"],
"@typescript-eslint/indent": ["error", 2],
"jsx-quotes": "error",
"keyword-spacing": "error",
"line-comment-position": "error",


+ 2
- 3
.gitignore View File

@@ -1,7 +1,6 @@
node_modules
yarn.lock
package-lock.json
dist
.cache
yarn-error.log
*.d.ts
package-lock.json
.cache

+ 6
- 0
.npmignore View File

@@ -0,0 +1,6 @@
js
example
.editorconfig
.eslintrc.json
.stylelintrc.json
tsconfig.json

+ 0
- 11
.postcssrc View File

@@ -1,11 +0,0 @@
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
},
"postcss-modules": {
"camelCase": true
}
}
}

+ 1
- 1
.stylelintrc.json View File

@@ -1,7 +1,7 @@
{
"extends": "stylelint-config-sass-guidelines",
"rules": {
"indentation": "tab",
"indentation": 2,
"order/properties-alphabetical-order": null,
"string-quotes": "double"
}


+ 3
- 9
example/package.json View File

@@ -2,13 +2,9 @@
"name": "teenyui",
"version": "0.1.0.",
"description": "Tiny UI library for Preact",
"main": "index.js",
"repository": "git@github.com:dsluijk/teenyui.git",
"repository": "git@git.dany.dev:dsluijk/teenyui.git",
"author": "Dany Sluijk <me@dany.dev>",
"license": "GPL-3.0",
"alias": {
"teenyui": "../src"
},
"sideEffects": [
"./src/index.tsx"
],
@@ -20,7 +16,6 @@
"lint": "eslint --max-warnings 0 --ext .js,.jsx,.ts,.tsx ./src && stylelint './src/**/*.scss'"
},
"devDependencies": {
"@rfgamaral/parcel-plugin-typings-for-css-modules": "^1.0.4",
"@types/node": "^14.11.2",
"@types/parcel-env": "^0.0.0",
"@typescript-eslint/eslint-plugin": "^4.3.0",
@@ -28,8 +23,6 @@
"autoprefixer": "^9.8.6",
"eslint": "^7.10.0",
"eslint-config-prettier": "^6.12.0",
"postcss": "^7.0.34",
"postcss-modules": "^3.2.2",
"http-server": "^0.12.3",
"parcel-bundler": "^1.12.4",
"parcel-plugin-bundle-visualiser": "^1.2.0",
@@ -37,6 +30,7 @@
"typescript": "^4.0.3"
},
"dependencies": {
"preact": "^10.5.4"
"preact": "^10.5.4",
"teenyui": "file:../"
}
}

+ 4
- 5
example/src/Main.tsx View File

@@ -1,12 +1,11 @@
import { h, FunctionalComponent } from "preact";

import { Button } from "teenyui/button";
import { Layout } from "teenyui/layout";
import { Button, Layout } from "teenyui";

const Main: FunctionalComponent = () => (
<Layout>
<Button>Hello World!</Button>
</Layout>
<Layout>
<Button>Hello World!</Button>
</Layout>
);

export default Main;

+ 4
- 4
example/src/global.scss View File

@@ -2,9 +2,9 @@

html,
body {
height: 100%;
width: 100%;
height: 100%;
width: 100%;

margin: 0;
padding: 0;
margin: 0;
padding: 0;
}

+ 8
- 8
example/src/index.html View File

@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TeenyUI demo site</title>
</head>
<body>
<script src="./index.tsx"></script>
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TeenyUI demo site</title>
</head>
<body>
<script src="./index.tsx"></script>
</body>
</html>

+ 2
- 2
example/src/index.tsx View File

@@ -8,14 +8,14 @@ import Main from "./Main";
* Start the application.
*/
const start = (): void => {
render(<Main />, document.body);
render(<Main />, document.body);
};

/**
* Include the debug code if it's a development build.
*/
if (process.env.NODE_ENV === "development") {
require("preact/debug");
require("preact/debug");
}

/**


+ 1
- 2
example/tsconfig.json View File

@@ -10,8 +10,7 @@
"allowJs": false,
"baseUrl": "./src",
"paths": {
"~*": ["./*"],
"teenyui/*": ["../../src/*"]
"~*": ["./*"]
}
},
"include": ["./src/**/*"]


+ 11
- 10
package.json View File

@@ -1,8 +1,10 @@
{
"name": "teenyui",
"version": "0.1.0.",
"version": "0.1.0",
"description": "Tiny UI library for Preact",
"main": "index.js",
"main": "./dist/teenyui.js",
"module": "./dist/teenyui.mjs",
"source": "./src/index.ts",
"repository": "git@github.com:dsluijk/teenyui.git",
"author": "Dany Sluijk <me@dany.dev>",
"license": "GPL-3.0",
@@ -10,24 +12,23 @@
"scripts": {
"lint": "yarn lint-ts && yarn lint-scss",
"lint-ts": "eslint --max-warnings 0 --ext .js,.jsx,.ts,.tsx ./src",
"lint-scss": "stylelint './src/**/*.scss'"
"lint-scss": "stylelint './src/**/*.scss'",
"build": "microbundle --css-modules",
"watch": "microbundle watch --css-modules"
},
"devDependencies": {
"@rfgamaral/parcel-plugin-typings-for-css-modules": "^1.0.4",
"@typescript-eslint/eslint-plugin": "^4.3.0",
"@typescript-eslint/parser": "^4.3.0",
"autoprefixer": "^9.8.6",
"cssnano": "^4.1.10",
"eslint": "^7.10.0",
"eslint-config-prettier": "^6.12.0",
"postcss": "^7.0.34",
"postcss-modules": "^3.2.2",
"sass": "^1.26.12",
"microbundle": "^0.12.4",
"preact": "^10.5.5",
"sass": "^1.29.0",
"stylelint": "^13.7.2",
"stylelint-config-sass-guidelines": "^7.1.0",
"typescript": "^4.0.3"
},
"peerDependencies": {
"preact": "^10.5.4"
"preact": "^10.5.5"
}
}

+ 2
- 2
src/button/index.tsx View File

@@ -1,7 +1,7 @@
import { h, FunctionalComponent } from "preact";

import * as style from "./style.scss";
import style from "./style.scss";

export const Button: FunctionalComponent = (props) => (
<button class={style.button}>{props.children}</button>
<button class={style.button}>{props.children}</button>
);

+ 11
- 11
src/button/style.scss View File

@@ -1,14 +1,14 @@
.button {
border: 0;
padding: 0.8vh 2vw;
margin: 0 1vh 1vw 0;
border-radius: 0.3em;
cursor: pointer;
color: #fff;
background-color: var(--primary-color);
border: 0;
padding: 0.8vh 2vw;
margin: 0 1vh 1vw 0;
border-radius: 0.3em;
cursor: pointer;
color: #fff;
background-color: var(--primary-color);

&:disabled {
cursor: not-allowed;
opacity: 0.3;
}
&:disabled {
cursor: not-allowed;
opacity: 0.3;
}
}

+ 4
- 0
src/gobal.d.ts View File

@@ -0,0 +1,4 @@
declare module '*.scss' {
const classes: { [key: string]: string };
export default classes;
}

+ 2
- 0
src/index.ts View File

@@ -0,0 +1,2 @@
export * from "./button";
export * from "./layout";

+ 5
- 5
src/layout/header/index.tsx View File

@@ -1,7 +1,7 @@
import { h, FunctionalComponent } from "preact";
import { h, FunctionalComponent, RenderableProps } from "preact";

import * as style from "./style.scss";
import style from "./style.scss";

export const Header: FunctionalComponent = (props) => (
<div class={style.header}>{props.children}</div>
);
export const Header: FunctionalComponent<RenderableProps<unknown>> = (
props
) => <div class={style.header}>{props.children}</div>;

+ 1
- 1
src/layout/header/style.scss View File

@@ -1,3 +1,3 @@
.header {
background-color: #123456;
background-color: #123456;
}

+ 2
- 2
src/layout/layout/index.tsx View File

@@ -1,7 +1,7 @@
import { h, FunctionalComponent } from "preact";

import * as style from "./style.scss";
import style from "./style.scss";

export const Layout: FunctionalComponent = (props) => (
<div class={style.layout}>{props.children}</div>
<div class={style.layout}>{props.children}</div>
);

+ 3
- 3
src/layout/layout/style.scss View File

@@ -1,6 +1,6 @@
.layout {
height: 100%;
width: 100%;
height: 100%;
width: 100%;

background-color: var(--primary-background);
background-color: var(--primary-background);
}

+ 4
- 4
src/theme/dark.scss View File

@@ -1,6 +1,6 @@
html {
--primary-color: rgba(39, 42, 176, 0.5);
--secondary-color: rgba(87, 39, 176, 0.5);
--primary-background: #000;
--secondary-background: #1a1a1a;
--primary-color: rgba(39, 42, 176, 0.5);
--secondary-color: rgba(87, 39, 176, 0.5);
--primary-background: #000;
--secondary-background: #1a1a1a;
}

+ 4
- 4
src/theme/light.scss View File

@@ -1,6 +1,6 @@
html {
--primary-color: #272ab0;
--secondary-color: #5727b0;
--primary-background: #fff;
--secondary-background: #f7f7f7;
--primary-color: #272ab0;
--secondary-color: #5727b0;
--primary-background: #fff;
--secondary-background: #f7f7f7;
}

+ 3
- 3
tsconfig.json View File

@@ -2,8 +2,8 @@
"compilerOptions": {
"noImplicitAny": true,
"sourceMap": true,
"module": "esnext",
"target": "es6",
"module": "ESNext",
"target": "ESNext",
"moduleResolution": "node",
"jsx": "react",
"jsxFactory": "h",
@@ -13,5 +13,5 @@
"~*": ["./*"]
}
},
"include": ["./src/**/*"]
"include": ["./src/**/*", "./src/global.d.ts"]
}