@svipwrap/npm-tsx-boilerplate 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +143 -0
- package/dist/Button/Button.d.ts +6 -0
- package/dist/Button/Button.test.d.ts +0 -0
- package/dist/Button/index.d.ts +3 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.es.js +273 -0
- package/dist/index.umd.js +7 -0
- package/package.json +73 -0
package/README.md
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
# svipwrap-npm-tsx-boilerplate
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@svipwrap/npm-tsx-boilerplate)
|
|
4
|
+
[](https://www.npmjs.com/package/@svipwrap/npm-tsx-boilerplate)
|
|
5
|
+
|
|
6
|
+
This is svipwrap-npm-tsx-boilerplate.
|
|
7
|
+
|
|
8
|
+
## 💻 Scripts in NPM
|
|
9
|
+
|
|
10
|
+
For some NPM scripts usage examples, please refer to [svipwrap-npm-ts-boilerplate](https://github.com/SSzzPP/svipwrap-npm-ts-boilerplate#readme).
|
|
11
|
+
|
|
12
|
+
## 🔧 Tools
|
|
13
|
+
|
|
14
|
+
#### vite-plugin-dts
|
|
15
|
+
|
|
16
|
+
- Used to output `.d.ts` type files.
|
|
17
|
+
|
|
18
|
+
```typescript
|
|
19
|
+
// vite.config.ts
|
|
20
|
+
import dts from 'vite-plugin-dts';
|
|
21
|
+
|
|
22
|
+
export default defineConfig({
|
|
23
|
+
plugins: [
|
|
24
|
+
dts({
|
|
25
|
+
insertTypesEntry: true,
|
|
26
|
+
}),
|
|
27
|
+
],
|
|
28
|
+
});
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
#### vite-plugin-css-injected-by-js
|
|
32
|
+
|
|
33
|
+
- When building a library, `Vite` by default extracts the CSS into a separate file instead of automatically injecting it into the JS. When referencing it, a separate CSS file needs to be included.
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
// example
|
|
37
|
+
|
|
38
|
+
import { Button } from 'svipwrap-npm-tsx-boilerplate';
|
|
39
|
+
// ❗️ Need to manually include the CSS file; otherwise, the component styles will not take effect.
|
|
40
|
+
import 'svipwrap-npm-tsx-boilerplate/dist/style.css';
|
|
41
|
+
|
|
42
|
+
<>
|
|
43
|
+
<Button text="Click Me" onClick={() => alert('Button Clicked!')} />
|
|
44
|
+
</>;
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
- Used to inject CSS into JS files (`CSS-in-JS`)
|
|
48
|
+
|
|
49
|
+
```typescript
|
|
50
|
+
// vite.config.ts
|
|
51
|
+
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
|
52
|
+
|
|
53
|
+
export default defineConfig({
|
|
54
|
+
plugins: [cssInjectedByJsPlugin()],
|
|
55
|
+
});
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
- 💡 Alternatively, you can use `styled-components`, `emotion`, or similar solutions, where the styles are directly bundled into the JS.
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
# install
|
|
62
|
+
npm install --save-dev @emotion/react @emotion/styled
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
// Button.tsx
|
|
67
|
+
import styled from '@emotion/styled'
|
|
68
|
+
|
|
69
|
+
const StyledButton = styled.button`
|
|
70
|
+
padding: 8px 16px;
|
|
71
|
+
background: blue;
|
|
72
|
+
color: white;
|
|
73
|
+
`
|
|
74
|
+
|
|
75
|
+
export const Button = () => <StyledButton>Click me</StyledButton>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## ⚙️ Config
|
|
79
|
+
|
|
80
|
+
#### CSS Module
|
|
81
|
+
|
|
82
|
+
1. Create `global.d.ts` file in root directory.
|
|
83
|
+
|
|
84
|
+
```typescript
|
|
85
|
+
// global.d.ts
|
|
86
|
+
declare module '*.module.css' {
|
|
87
|
+
const classes: { [key: string]: string };
|
|
88
|
+
export default classes;
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
2. Add `global.d.ts` to `include` list in `tsconfig.json` file.
|
|
93
|
+
|
|
94
|
+
```javascript
|
|
95
|
+
// tsconfig.json
|
|
96
|
+
"include": ["src/components", "global.d.ts"], // Directory that needs to be packaged
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
#### Customize the naming rules for CSS files in the build output.
|
|
100
|
+
|
|
101
|
+
- Add `assetFileNames` config in `vite.config.ts`.
|
|
102
|
+
|
|
103
|
+
> ⚠️ If there are multiple CSS entries, they will be merged into a single `style.css` file.
|
|
104
|
+
> Using `CSS-in-JS` eliminates this concern.
|
|
105
|
+
|
|
106
|
+
```typescript
|
|
107
|
+
// vite.config.ts
|
|
108
|
+
assetFileNames: (assetInfo) => {
|
|
109
|
+
if (assetInfo.names && assetInfo.names.some((name) => name.endsWith('.css'))) return 'style.css';
|
|
110
|
+
return assetInfo.names[0];
|
|
111
|
+
},
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## 📦 Build
|
|
115
|
+
|
|
116
|
+
- All components are located in `components` directory.
|
|
117
|
+
|
|
118
|
+
- Exporting components and types in `index.ts` under `components` directory.
|
|
119
|
+
|
|
120
|
+
```typescript
|
|
121
|
+
// components/index.ts
|
|
122
|
+
export { default as Button } from './Button';
|
|
123
|
+
export type { ButtonProps } from './Button';
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
- Configure the directory to be packaged
|
|
127
|
+
|
|
128
|
+
```javascript
|
|
129
|
+
// tsconfig.json
|
|
130
|
+
"include": ["src/components", "global.d.ts"], // Directory that needs to be packaged
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
- Configure the entry file of component library source code
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
// vite.config.ts
|
|
137
|
+
build: {
|
|
138
|
+
lib: {
|
|
139
|
+
// Entry file of component library source code
|
|
140
|
+
entry: resolve(__dirname, 'src/components/index.ts'),
|
|
141
|
+
},
|
|
142
|
+
}
|
|
143
|
+
```
|
|
File without changes
|
package/dist/index.d.ts
ADDED
package/dist/index.es.js
ADDED
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._button_yuu1c_1{width:100px;height:20px;background-color:#000;color:#fff;border-radius:5px;cursor:pointer}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
import ee from "react";
|
|
3
|
+
var v = { exports: {} }, _ = {};
|
|
4
|
+
var $;
|
|
5
|
+
function re() {
|
|
6
|
+
if ($) return _;
|
|
7
|
+
$ = 1;
|
|
8
|
+
var u = /* @__PURE__ */ Symbol.for("react.transitional.element"), l = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
9
|
+
function i(f, o, s) {
|
|
10
|
+
var d = null;
|
|
11
|
+
if (s !== void 0 && (d = "" + s), o.key !== void 0 && (d = "" + o.key), "key" in o) {
|
|
12
|
+
s = {};
|
|
13
|
+
for (var m in o)
|
|
14
|
+
m !== "key" && (s[m] = o[m]);
|
|
15
|
+
} else s = o;
|
|
16
|
+
return o = s.ref, {
|
|
17
|
+
$$typeof: u,
|
|
18
|
+
type: f,
|
|
19
|
+
key: d,
|
|
20
|
+
ref: o !== void 0 ? o : null,
|
|
21
|
+
props: s
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
return _.Fragment = l, _.jsx = i, _.jsxs = i, _;
|
|
25
|
+
}
|
|
26
|
+
var E = {};
|
|
27
|
+
var I;
|
|
28
|
+
function te() {
|
|
29
|
+
return I || (I = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
30
|
+
function u(e) {
|
|
31
|
+
if (e == null) return null;
|
|
32
|
+
if (typeof e == "function")
|
|
33
|
+
return e.$$typeof === Z ? null : e.displayName || e.name || null;
|
|
34
|
+
if (typeof e == "string") return e;
|
|
35
|
+
switch (e) {
|
|
36
|
+
case p:
|
|
37
|
+
return "Fragment";
|
|
38
|
+
case q:
|
|
39
|
+
return "Profiler";
|
|
40
|
+
case U:
|
|
41
|
+
return "StrictMode";
|
|
42
|
+
case G:
|
|
43
|
+
return "Suspense";
|
|
44
|
+
case X:
|
|
45
|
+
return "SuspenseList";
|
|
46
|
+
case H:
|
|
47
|
+
return "Activity";
|
|
48
|
+
}
|
|
49
|
+
if (typeof e == "object")
|
|
50
|
+
switch (typeof e.tag == "number" && console.error(
|
|
51
|
+
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
52
|
+
), e.$$typeof) {
|
|
53
|
+
case W:
|
|
54
|
+
return "Portal";
|
|
55
|
+
case V:
|
|
56
|
+
return e.displayName || "Context";
|
|
57
|
+
case J:
|
|
58
|
+
return (e._context.displayName || "Context") + ".Consumer";
|
|
59
|
+
case z:
|
|
60
|
+
var r = e.render;
|
|
61
|
+
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
62
|
+
case B:
|
|
63
|
+
return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
|
|
64
|
+
case T:
|
|
65
|
+
r = e._payload, e = e._init;
|
|
66
|
+
try {
|
|
67
|
+
return u(e(r));
|
|
68
|
+
} catch {
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
return null;
|
|
72
|
+
}
|
|
73
|
+
function l(e) {
|
|
74
|
+
return "" + e;
|
|
75
|
+
}
|
|
76
|
+
function i(e) {
|
|
77
|
+
try {
|
|
78
|
+
l(e);
|
|
79
|
+
var r = !1;
|
|
80
|
+
} catch {
|
|
81
|
+
r = !0;
|
|
82
|
+
}
|
|
83
|
+
if (r) {
|
|
84
|
+
r = console;
|
|
85
|
+
var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
86
|
+
return t.call(
|
|
87
|
+
r,
|
|
88
|
+
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
89
|
+
n
|
|
90
|
+
), l(e);
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
function f(e) {
|
|
94
|
+
if (e === p) return "<>";
|
|
95
|
+
if (typeof e == "object" && e !== null && e.$$typeof === T)
|
|
96
|
+
return "<...>";
|
|
97
|
+
try {
|
|
98
|
+
var r = u(e);
|
|
99
|
+
return r ? "<" + r + ">" : "<...>";
|
|
100
|
+
} catch {
|
|
101
|
+
return "<...>";
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
function o() {
|
|
105
|
+
var e = k.A;
|
|
106
|
+
return e === null ? null : e.getOwner();
|
|
107
|
+
}
|
|
108
|
+
function s() {
|
|
109
|
+
return Error("react-stack-top-frame");
|
|
110
|
+
}
|
|
111
|
+
function d(e) {
|
|
112
|
+
if (w.call(e, "key")) {
|
|
113
|
+
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
114
|
+
if (r && r.isReactWarning) return !1;
|
|
115
|
+
}
|
|
116
|
+
return e.key !== void 0;
|
|
117
|
+
}
|
|
118
|
+
function m(e, r) {
|
|
119
|
+
function t() {
|
|
120
|
+
g || (g = !0, console.error(
|
|
121
|
+
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
122
|
+
r
|
|
123
|
+
));
|
|
124
|
+
}
|
|
125
|
+
t.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
126
|
+
get: t,
|
|
127
|
+
configurable: !0
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
function L() {
|
|
131
|
+
var e = u(this.type);
|
|
132
|
+
return h[e] || (h[e] = !0, console.error(
|
|
133
|
+
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
134
|
+
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
135
|
+
}
|
|
136
|
+
function M(e, r, t, n, R, A) {
|
|
137
|
+
var a = t.ref;
|
|
138
|
+
return e = {
|
|
139
|
+
$$typeof: j,
|
|
140
|
+
type: e,
|
|
141
|
+
key: r,
|
|
142
|
+
props: t,
|
|
143
|
+
_owner: n
|
|
144
|
+
}, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
|
|
145
|
+
enumerable: !1,
|
|
146
|
+
get: L
|
|
147
|
+
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
148
|
+
configurable: !1,
|
|
149
|
+
enumerable: !1,
|
|
150
|
+
writable: !0,
|
|
151
|
+
value: 0
|
|
152
|
+
}), Object.defineProperty(e, "_debugInfo", {
|
|
153
|
+
configurable: !1,
|
|
154
|
+
enumerable: !1,
|
|
155
|
+
writable: !0,
|
|
156
|
+
value: null
|
|
157
|
+
}), Object.defineProperty(e, "_debugStack", {
|
|
158
|
+
configurable: !1,
|
|
159
|
+
enumerable: !1,
|
|
160
|
+
writable: !0,
|
|
161
|
+
value: R
|
|
162
|
+
}), Object.defineProperty(e, "_debugTask", {
|
|
163
|
+
configurable: !1,
|
|
164
|
+
enumerable: !1,
|
|
165
|
+
writable: !0,
|
|
166
|
+
value: A
|
|
167
|
+
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
168
|
+
}
|
|
169
|
+
function y(e, r, t, n, R, A) {
|
|
170
|
+
var a = r.children;
|
|
171
|
+
if (a !== void 0)
|
|
172
|
+
if (n)
|
|
173
|
+
if (Q(a)) {
|
|
174
|
+
for (n = 0; n < a.length; n++)
|
|
175
|
+
P(a[n]);
|
|
176
|
+
Object.freeze && Object.freeze(a);
|
|
177
|
+
} else
|
|
178
|
+
console.error(
|
|
179
|
+
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
180
|
+
);
|
|
181
|
+
else P(a);
|
|
182
|
+
if (w.call(r, "key")) {
|
|
183
|
+
a = u(e);
|
|
184
|
+
var c = Object.keys(r).filter(function(K) {
|
|
185
|
+
return K !== "key";
|
|
186
|
+
});
|
|
187
|
+
n = 0 < c.length ? "{key: someKey, " + c.join(": ..., ") + ": ...}" : "{key: someKey}", Y[a + n] || (c = 0 < c.length ? "{" + c.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
188
|
+
`A props object containing a "key" prop is being spread into JSX:
|
|
189
|
+
let props = %s;
|
|
190
|
+
<%s {...props} />
|
|
191
|
+
React keys must be passed directly to JSX without using spread:
|
|
192
|
+
let props = %s;
|
|
193
|
+
<%s key={someKey} {...props} />`,
|
|
194
|
+
n,
|
|
195
|
+
a,
|
|
196
|
+
c,
|
|
197
|
+
a
|
|
198
|
+
), Y[a + n] = !0);
|
|
199
|
+
}
|
|
200
|
+
if (a = null, t !== void 0 && (i(t), a = "" + t), d(r) && (i(r.key), a = "" + r.key), "key" in r) {
|
|
201
|
+
t = {};
|
|
202
|
+
for (var S in r)
|
|
203
|
+
S !== "key" && (t[S] = r[S]);
|
|
204
|
+
} else t = r;
|
|
205
|
+
return a && m(
|
|
206
|
+
t,
|
|
207
|
+
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
208
|
+
), M(
|
|
209
|
+
e,
|
|
210
|
+
a,
|
|
211
|
+
t,
|
|
212
|
+
o(),
|
|
213
|
+
R,
|
|
214
|
+
A
|
|
215
|
+
);
|
|
216
|
+
}
|
|
217
|
+
function P(e) {
|
|
218
|
+
x(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? x(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
219
|
+
}
|
|
220
|
+
function x(e) {
|
|
221
|
+
return typeof e == "object" && e !== null && e.$$typeof === j;
|
|
222
|
+
}
|
|
223
|
+
var b = ee, j = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), p = /* @__PURE__ */ Symbol.for("react.fragment"), U = /* @__PURE__ */ Symbol.for("react.strict_mode"), q = /* @__PURE__ */ Symbol.for("react.profiler"), J = /* @__PURE__ */ Symbol.for("react.consumer"), V = /* @__PURE__ */ Symbol.for("react.context"), z = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), X = /* @__PURE__ */ Symbol.for("react.suspense_list"), B = /* @__PURE__ */ Symbol.for("react.memo"), T = /* @__PURE__ */ Symbol.for("react.lazy"), H = /* @__PURE__ */ Symbol.for("react.activity"), Z = /* @__PURE__ */ Symbol.for("react.client.reference"), k = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, w = Object.prototype.hasOwnProperty, Q = Array.isArray, O = console.createTask ? console.createTask : function() {
|
|
224
|
+
return null;
|
|
225
|
+
};
|
|
226
|
+
b = {
|
|
227
|
+
react_stack_bottom_frame: function(e) {
|
|
228
|
+
return e();
|
|
229
|
+
}
|
|
230
|
+
};
|
|
231
|
+
var g, h = {}, N = b.react_stack_bottom_frame.bind(
|
|
232
|
+
b,
|
|
233
|
+
s
|
|
234
|
+
)(), C = O(f(s)), Y = {};
|
|
235
|
+
E.Fragment = p, E.jsx = function(e, r, t) {
|
|
236
|
+
var n = 1e4 > k.recentlyCreatedOwnerStacks++;
|
|
237
|
+
return y(
|
|
238
|
+
e,
|
|
239
|
+
r,
|
|
240
|
+
t,
|
|
241
|
+
!1,
|
|
242
|
+
n ? Error("react-stack-top-frame") : N,
|
|
243
|
+
n ? O(f(e)) : C
|
|
244
|
+
);
|
|
245
|
+
}, E.jsxs = function(e, r, t) {
|
|
246
|
+
var n = 1e4 > k.recentlyCreatedOwnerStacks++;
|
|
247
|
+
return y(
|
|
248
|
+
e,
|
|
249
|
+
r,
|
|
250
|
+
t,
|
|
251
|
+
!0,
|
|
252
|
+
n ? Error("react-stack-top-frame") : N,
|
|
253
|
+
n ? O(f(e)) : C
|
|
254
|
+
);
|
|
255
|
+
};
|
|
256
|
+
})()), E;
|
|
257
|
+
}
|
|
258
|
+
var F;
|
|
259
|
+
function ne() {
|
|
260
|
+
return F || (F = 1, process.env.NODE_ENV === "production" ? v.exports = re() : v.exports = te()), v.exports;
|
|
261
|
+
}
|
|
262
|
+
var D = ne();
|
|
263
|
+
const ae = "_button_yuu1c_1", oe = {
|
|
264
|
+
button: ae
|
|
265
|
+
}, ue = ({
|
|
266
|
+
text: u = "Button",
|
|
267
|
+
onClick: l = () => {
|
|
268
|
+
console.log("click");
|
|
269
|
+
}
|
|
270
|
+
}) => /* @__PURE__ */ D.jsx("div", { children: /* @__PURE__ */ D.jsx("button", { className: oe.button, onClick: l, children: u }) });
|
|
271
|
+
export {
|
|
272
|
+
ue as Button
|
|
273
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._button_yuu1c_1{width:100px;height:20px;background-color:#000;color:#fff;border-radius:5px;cursor:pointer}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
(function(l,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],f):(l=typeof globalThis<"u"?globalThis:l||self,f(l["svipwrap-npm-tsx-boilerplate"]={},l.React))})(this,(function(l,f){"use strict";var R={exports:{}},d={};var P;function W(){if(P)return d;P=1;var u=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function _(E,a,s){var b=null;if(s!==void 0&&(b=""+s),a.key!==void 0&&(b=""+a.key),"key"in a){s={};for(var p in a)p!=="key"&&(s[p]=a[p])}else s=a;return a=s.ref,{$$typeof:u,type:E,key:b,ref:a!==void 0?a:null,props:s}}return d.Fragment=c,d.jsx=_,d.jsxs=_,d}var m={};var j;function U(){return j||(j=1,process.env.NODE_ENV!=="production"&&(function(){function u(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===oe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case H:return"Profiler";case X:return"StrictMode";case ee:return"Suspense";case re:return"SuspenseList";case ne:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case B:return"Portal";case Q:return e.displayName||"Context";case Z:return(e._context.displayName||"Context")+".Consumer";case K:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case te:return r=e.displayName||null,r!==null?r:u(e.type)||"Memo";case O:r=e._payload,e=e._init;try{return u(e(r))}catch{}}return null}function c(e){return""+e}function _(e){try{c(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),c(e)}}function E(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var r=u(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function a(){var e=y.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function b(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function p(e,r){function t(){$||($=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function z(){var e=u(this.type);return F[e]||(F[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function G(e,r,t,n,T,A){var o=t.ref;return e={$$typeof:Y,type:e,key:r,props:t,_owner:n},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:z}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:T}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function g(e,r,t,n,T,A){var o=r.children;if(o!==void 0)if(n)if(ae(o)){for(n=0;n<o.length;n++)N(o[n]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else N(o);if(I.call(r,"key")){o=u(e);var i=Object.keys(r).filter(function(se){return se!=="key"});n=0<i.length?"{key: someKey, "+i.join(": ..., ")+": ...}":"{key: someKey}",L[o+n]||(i=0<i.length?"{"+i.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
3
|
+
let props = %s;
|
|
4
|
+
<%s {...props} />
|
|
5
|
+
React keys must be passed directly to JSX without using spread:
|
|
6
|
+
let props = %s;
|
|
7
|
+
<%s key={someKey} {...props} />`,n,o,i,o),L[o+n]=!0)}if(o=null,t!==void 0&&(_(t),o=""+t),b(r)&&(_(r.key),o=""+r.key),"key"in r){t={};for(var x in r)x!=="key"&&(t[x]=r[x])}else t=r;return o&&p(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),G(e,o,t,a(),T,A)}function N(e){C(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?C(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function C(e){return typeof e=="object"&&e!==null&&e.$$typeof===Y}var v=f,Y=Symbol.for("react.transitional.element"),B=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),X=Symbol.for("react.strict_mode"),H=Symbol.for("react.profiler"),Z=Symbol.for("react.consumer"),Q=Symbol.for("react.context"),K=Symbol.for("react.forward_ref"),ee=Symbol.for("react.suspense"),re=Symbol.for("react.suspense_list"),te=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),ne=Symbol.for("react.activity"),oe=Symbol.for("react.client.reference"),y=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,ae=Array.isArray,S=console.createTask?console.createTask:function(){return null};v={react_stack_bottom_frame:function(e){return e()}};var $,F={},D=v.react_stack_bottom_frame.bind(v,s)(),M=S(E(s)),L={};m.Fragment=k,m.jsx=function(e,r,t){var n=1e4>y.recentlyCreatedOwnerStacks++;return g(e,r,t,!1,n?Error("react-stack-top-frame"):D,n?S(E(e)):M)},m.jsxs=function(e,r,t){var n=1e4>y.recentlyCreatedOwnerStacks++;return g(e,r,t,!0,n?Error("react-stack-top-frame"):D,n?S(E(e)):M)}})()),m}var h;function q(){return h||(h=1,process.env.NODE_ENV==="production"?R.exports=W():R.exports=U()),R.exports}var w=q();const J={button:"_button_yuu1c_1"},V=({text:u="Button",onClick:c=()=>{console.log("click")}})=>w.jsx("div",{children:w.jsx("button",{className:J.button,onClick:c,children:u})});l.Button=V,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@svipwrap/npm-tsx-boilerplate",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "svipwrap-npm-ts-boilerplate provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.umd.js",
|
|
7
|
+
"module": "dist/index.es.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"scripts": {
|
|
10
|
+
"dev": "vite",
|
|
11
|
+
"build": "tsc -b && vite build",
|
|
12
|
+
"preview": "vite preview",
|
|
13
|
+
"format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
|
|
14
|
+
"lint": "tslint -p tsconfig.json",
|
|
15
|
+
"test": "jest --config jestconfig.json",
|
|
16
|
+
"test:watch": "jest --watch --config jestconfig.json",
|
|
17
|
+
"test:clear": "jest --clearCache",
|
|
18
|
+
"prepare": "npm run build",
|
|
19
|
+
"prepublishOnly": "npm run test && npm run lint",
|
|
20
|
+
"preversion": "npm run lint",
|
|
21
|
+
"version": "npm run format && git add -A src",
|
|
22
|
+
"postversion": "git push && git push --tags"
|
|
23
|
+
},
|
|
24
|
+
"repository": {
|
|
25
|
+
"type": "git",
|
|
26
|
+
"url": "git+https://github.com/SSzzPP/svipwrap-npm-tsx-boilerplate.git"
|
|
27
|
+
},
|
|
28
|
+
"keywords": [
|
|
29
|
+
"typescript",
|
|
30
|
+
"react",
|
|
31
|
+
"vite",
|
|
32
|
+
"ts",
|
|
33
|
+
"tsx",
|
|
34
|
+
"npm",
|
|
35
|
+
"boilerplate"
|
|
36
|
+
],
|
|
37
|
+
"author": "SSzzPP",
|
|
38
|
+
"license": "ISC",
|
|
39
|
+
"bugs": {
|
|
40
|
+
"url": "https://github.com/SSzzPP/svipwrap-npm-tsx-boilerplate/issues"
|
|
41
|
+
},
|
|
42
|
+
"homepage": "https://github.com/SSzzPP/svipwrap-npm-tsx-boilerplate#readme",
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
45
|
+
"@testing-library/react": "^16.3.2",
|
|
46
|
+
"@types/jest": "^30.0.0",
|
|
47
|
+
"@types/node": "^25.0.10",
|
|
48
|
+
"@types/react": "^19.2.9",
|
|
49
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
50
|
+
"identity-obj-proxy": "^3.0.0",
|
|
51
|
+
"jest": "^30.2.0",
|
|
52
|
+
"jest-environment-jsdom": "^30.2.0",
|
|
53
|
+
"prettier": "^3.8.1",
|
|
54
|
+
"ts-jest": "^29.4.6",
|
|
55
|
+
"tslint": "^6.1.3",
|
|
56
|
+
"tslint-config-prettier": "^1.18.0",
|
|
57
|
+
"typescript": "^5.9.3",
|
|
58
|
+
"vite": "^7.3.1",
|
|
59
|
+
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
60
|
+
"vite-plugin-dts": "^4.5.4"
|
|
61
|
+
},
|
|
62
|
+
"dependencies": {
|
|
63
|
+
"react": ">=16.8",
|
|
64
|
+
"react-dom": ">=16.8"
|
|
65
|
+
},
|
|
66
|
+
"peerDependencies": {
|
|
67
|
+
"react": ">=16.8",
|
|
68
|
+
"react-dom": ">=16.8"
|
|
69
|
+
},
|
|
70
|
+
"files": [
|
|
71
|
+
"dist"
|
|
72
|
+
]
|
|
73
|
+
}
|