@tsmodule/tsmodule 28.1.0 → 28.7.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/templates/default/README.md +8 -3
- package/templates/react/README.md +21 -3
- package/templates/react/public/vercel.svg +4 -0
- package/templates/react/src/components/CardGrid/index.tsx +4 -4
- package/templates/react/src/components/GetStarted/index.tsx +2 -2
- package/templates/react/src/styles/components/card/index.css +6 -2
- package/templates/react/src/styles/global/elements/index.css +7 -9
- package/templates/react/src/styles/global/viewport/index.css +1 -1
package/dist/index.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
#!/usr/bin/env node
|
2
|
-
var r="@tsmodule/tsmodule",s="node",a="module",d="28.
|
2
|
+
var r="@tsmodule/tsmodule",s="node",a="module",d="28.7.0",m="tsmodule/tsmodule",l="TypeScript Module loader and compiler",p="MIT",c={tsmodule:"dist/index.js"},u={".":"./dist/loader/index.js","./*":"./dist/*/index.js","./package.json":"./package.json"},f="dist/types/index.d.ts",g=[{name:"C. Lewis",email:"ctj.lewis@icloud.com",url:"https://ctjlewis.com"}],b=["dist/","templates/"],y={node:">=14"},h={bootstrap:"node bootstrap.js",bootload:"node --no-warnings --loader ./dist/loader/index.js src/index.ts build -r",prebuild:"yarn bootstrap && yarn bootload && yarn link -f",build:"tsmodule build",dev:"tsmodule dev",lint:"eslint --fix src",prepare:"yarn build -r",prepublishOnly:"yarn build && yarn test",pretest:"yarn build -r",test:"ava --no-worker-threads",retest:"SKIP_TEST_SETUP=1 yarn test"},v={"@types/glob":"^7.2.0","@types/node":"^17.0.21","@typescript-eslint/eslint-plugin":"^5.14.0","@typescript-eslint/parser":"^5.14.0",ava:"^4.1.0","await-shell":"^32.0.0",chalk:"^5.0.1",commander:"^9.0.0","create-debug-logger":"^3.0.0",esbuild:"^0.14.25",eslint:"^8.11.0","fast-glob":"^3.2.10","fs-extra":"^10.0.1",glob:"^7.2.0","node-watch":"^0.7.3",ora:"^6.1.0",path:"^0.12.7",typescript:"^4.6.2"},w=["esm","loader","typescript","loader hook","require hook","experimental-loader"],S={timeout:"10 minutes",files:["test/**/*.test.ts"],extensions:{ts:"module"},nodeArguments:["--no-warnings","--loader=@tsmodule/tsmodule"]},R={"@types/fs-extra":"^9.0.13"},n={name:r,platform:s,type:a,version:d,repository:m,description:l,license:p,bin:c,exports:u,types:f,contributors:g,files:b,engines:y,scripts:h,dependencies:v,keywords:w,ava:S,devDependencies:R};import t from"chalk";import{Command as x}from"commander";import{build as B}from"./commands/build/index.js";import{create as C}from"./commands/create/index.js";import{dev as E}from"./commands/dev/index.js";import{execute as T}from"./commands/execute/index.js";import{normalizeImportSpecifiers as A}from"./commands/normalize/index.js";const{version:j}=n,o=new x;o.name(t.white(t.bold("tsmodule"))).usage(t.white(t.bold("<file | command> [options]"))).description(t.blueBright(`A tool for building TypeScript modules.
|
3
3
|
|
4
4
|
Run TS directly: ${t.bold("tsmodule src/index.ts")}
|
5
5
|
Use a command: ${t.bold("tsmodule build")}`)).version(String(j)),o.command("dev").description("Build and watch for changes.").action(E),o.command("build").option("--files <files>","Entrypoints to compile.\r","src/**/*").option("--styles <styles>","Specify stylesheet entrypoint.\r","src/styles/components/index.css").option("-t, --target <target>","ECMAScript featureset to target.\r","esnext").option("-b, --bundle","Bundle dependencies into entrypoints.\r",!1).option("-d, --dev","Build development runtime.\r",!1).option("-r, --runtime-only","Do not emit type declarations, only build JS runtime.\r",!1).option("--stdin [source]","Read from a string or stdin.").option("--stdin-file [file]","File path to mock for stdin.").option("--no-write",`Return code from build() rather than write to disk.
|
package/package.json
CHANGED
@@ -4,7 +4,7 @@ This is a [`tsmodule`](https://github.com/tsmodule/tsmodule) library. By
|
|
4
4
|
default, it is assumed to be a Node program, but this can be adjusted via the
|
5
5
|
`platform` field in package.json.
|
6
6
|
|
7
|
-
|
7
|
+
### Develop
|
8
8
|
|
9
9
|
Rebuild on changes with `tsmodule dev` or the `yarn dev` script:
|
10
10
|
|
@@ -13,7 +13,7 @@ yarn dev
|
|
13
13
|
# calls `tsmodule dev`
|
14
14
|
```
|
15
15
|
|
16
|
-
|
16
|
+
### Export and publish
|
17
17
|
|
18
18
|
To export your component library, use `tsmodule build` or the `yarn build`
|
19
19
|
script:
|
@@ -27,4 +27,9 @@ You can then publish to NPM:
|
|
27
27
|
|
28
28
|
```bash
|
29
29
|
yarn publish
|
30
|
-
```
|
30
|
+
```
|
31
|
+
|
32
|
+
#### Importing from your library
|
33
|
+
|
34
|
+
All index exports, e.g. `src/example/index.tsx` will be available downstream
|
35
|
+
via `import ... from "my-library/example"`.
|
@@ -3,7 +3,7 @@
|
|
3
3
|
This is a [`tsmodule`](https://github.com/tsmodule/tsmodule) component library
|
4
4
|
developed and previewed with Next.js.
|
5
5
|
|
6
|
-
|
6
|
+
### Develop
|
7
7
|
|
8
8
|
To start the Next server and develop your components, use `next dev` or the
|
9
9
|
`yarn dev` script:
|
@@ -13,7 +13,7 @@ yarn dev
|
|
13
13
|
# calls `next dev`
|
14
14
|
```
|
15
15
|
|
16
|
-
|
16
|
+
### Export and publish
|
17
17
|
|
18
18
|
To export your component library, use `tsmodule build` or the `yarn export`
|
19
19
|
script:
|
@@ -27,4 +27,22 @@ You can then publish to NPM:
|
|
27
27
|
|
28
28
|
```bash
|
29
29
|
yarn publish
|
30
|
-
```
|
30
|
+
```
|
31
|
+
|
32
|
+
#### Importing from your component library
|
33
|
+
|
34
|
+
To reuse your components:
|
35
|
+
|
36
|
+
1. Import your component styles via `import "my-library/styles"`.
|
37
|
+
2. Import your component and render it via `import { MyComponent } from
|
38
|
+
"my-library/MyComponent`.
|
39
|
+
|
40
|
+
#### Footnotes
|
41
|
+
|
42
|
+
Styles are exported in `dist/`, and are also bundled to `dist/styles.css` from
|
43
|
+
the entrypoint given in the `style` package.json.
|
44
|
+
|
45
|
+
The default behavior is to export all component styles, i.e.
|
46
|
+
`src/styles/components/index.css ➞ dist/styles.css`. This can be overridden
|
47
|
+
with tsmodule's `--styles` flag, i.e. `tsmodule build --styles
|
48
|
+
src/styles/index.css` (which would include all styles in emitted bundle).
|
@@ -0,0 +1,4 @@
|
|
1
|
+
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
2
|
+
xmlns="http://www.w3.org/2000/svg">
|
3
|
+
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
4
|
+
</svg>
|
@@ -2,11 +2,11 @@ import { Card } from "../Card";
|
|
2
2
|
|
3
3
|
export const CardGrid = () => {
|
4
4
|
return (
|
5
|
-
<div className="grid md:grid-cols-2">
|
6
|
-
<
|
5
|
+
<div className="px-4 grid md:grid-cols-2 gap-8">
|
6
|
+
<Card href="https://nextjs.org/learn">
|
7
7
|
<h4>Documentation →</h4>
|
8
8
|
<p>Find in-depth information about Next.js features and API.</p>
|
9
|
-
</
|
9
|
+
</Card>
|
10
10
|
|
11
11
|
<Card href="https://nextjs.org/learn">
|
12
12
|
<h4>Learn →</h4>
|
@@ -21,7 +21,7 @@ export const CardGrid = () => {
|
|
21
21
|
<Card href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app">
|
22
22
|
<h4>Deploy →</h4>
|
23
23
|
<p>
|
24
|
-
|
24
|
+
Instantly deploy your Next.js site to a public URL with Vercel.
|
25
25
|
</p>
|
26
26
|
</Card>
|
27
27
|
</div>
|
@@ -1,8 +1,8 @@
|
|
1
1
|
export const GetStarted = () => {
|
2
2
|
return (
|
3
|
-
<p className="
|
3
|
+
<p className="text-gray-700 text-center font-size-3">
|
4
4
|
Get started by editing{" "}
|
5
|
-
<code className="code">pages/index.js</code
|
5
|
+
<code className="code">pages/index.js</code>.
|
6
6
|
</p>
|
7
7
|
);
|
8
8
|
};
|
@@ -1,9 +1,9 @@
|
|
1
1
|
.card {
|
2
|
-
@apply
|
2
|
+
@apply p-6 text-left rounded-lg;
|
3
|
+
@apply max-w-[20rem];
|
3
4
|
text-decoration: none;
|
4
5
|
border: 1px solid #eaeaea;
|
5
6
|
transition: color 0.15s ease, border-color 0.15s ease;
|
6
|
-
/* max-width: 300px; */
|
7
7
|
}
|
8
8
|
|
9
9
|
.card:hover,
|
@@ -11,4 +11,8 @@
|
|
11
11
|
.card:active {
|
12
12
|
color: #0070f3;
|
13
13
|
border-color: #0070f3;
|
14
|
+
}
|
15
|
+
|
16
|
+
.card > p {
|
17
|
+
@apply text-gray-700;
|
14
18
|
}
|
@@ -60,12 +60,6 @@ h6 a {
|
|
60
60
|
}
|
61
61
|
}
|
62
62
|
|
63
|
-
@media (min-width: 1441px) {
|
64
|
-
html {
|
65
|
-
font-size: 1.8em;
|
66
|
-
}
|
67
|
-
}
|
68
|
-
|
69
63
|
@media (min-width: 1921px) {
|
70
64
|
html {
|
71
65
|
font-size: 2.5em;
|
@@ -108,6 +102,10 @@ h6, .h6 {
|
|
108
102
|
@apply text-sm;
|
109
103
|
}
|
110
104
|
|
105
|
+
p {
|
106
|
+
@apply text-base;
|
107
|
+
}
|
108
|
+
|
111
109
|
.title {
|
112
110
|
@apply mt-2 display font-bold;
|
113
111
|
}
|
@@ -160,9 +158,9 @@ h6, .h6 {
|
|
160
158
|
code {}
|
161
159
|
|
162
160
|
main {
|
163
|
-
|
164
|
-
|
165
|
-
@apply
|
161
|
+
@apply flex-center flex-col space-y-8 md:space-y-16;
|
162
|
+
@apply min-h-full w-full;
|
163
|
+
@apply px-4 py-16;
|
166
164
|
}
|
167
165
|
|
168
166
|
header {
|