Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Tue, 24 Jan 2023 02:42:54 +0000
Hash: 109ad16bf7496fecb92be42494f99109cb4d46fe
Timestamp: Tue, 24 Jan 2023 02:42:54 +0000 (1 year ago)

+155 -6 +/-7 browse
add TS support, cleans up modules (#335) 
add TS support, cleans up modules (#335)

* remove microbundle, gen minimal dist/ files

* builds typings for each prop bundle

* adds a test to verify the build produces some typings

* Apply suggestions from code review

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>
Co-authored-by: Howard Chiam <hchiam@users.noreply.github.com>

* Apply suggestions from code review

* Update test/basic.test.cjs

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>

* better gitignore for built files

* fixes test syntax regression from gh commit

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>
Co-authored-by: Howard Chiam <hchiam@users.noreply.github.com>
1diff --git a/.gitignore b/.gitignore
2index 0e1421f..cf15461 100644
3--- a/.gitignore
4+++ b/.gitignore
5 @@ -1,4 +1,9 @@
6 .DS_Store
7 dist/
8 .cache/
9- node_modules/
10\ No newline at end of file
11+ node_modules/
12+ *.min.css
13+ src/shadow.*.css
14+ *.json
15+ *.ts
16+ *.d.ts
17\ No newline at end of file
18 diff --git a/build/props.js b/build/props.js
19index ee8fd4b..fa0b1a7 100644
20--- a/build/props.js
21+++ b/build/props.js
22 @@ -17,6 +17,8 @@ import MaskCornerCuts from '../src/props.masks.corner-cuts.js'
23
24 import {buildPropsStylesheet} from './to-stylesheet.js'
25 import {toTokens} from './to-tokens.js'
26+ import {toObject} from './to-object.js'
27+ import {toTypes, preparedTypes} from './to-types.js'
28 import {toFigmaTokens} from './to-figmatokens.js'
29
30 const [,,prefix='',useWhere,customSubject='',filePrefix=''] = process.argv
31 @@ -82,6 +84,32 @@ const figmatokensSYNC = { 'open-props': { ...figmatokens } }
32 const FigmaTokensSync = fs.createWriteStream('../open-props.figma-tokens.sync.json')
33 FigmaTokensSync.end(JSON.stringify(figmatokensSYNC, null, 2))
34
35+ if (!fs.existsSync('../dist'))
36+ fs.mkdirSync('../dist')
37+
38+ const JS = fs.createWriteStream('../dist/open-props.js')
39+ JS.end(`var OpenProps = ${JSON.stringify(toObject(), null, 2)}`)
40+
41+ const ES = fs.createWriteStream('../dist/open-props.module.js')
42+ ES.end(`export default ${JSON.stringify(toObject(), null, 2)}`)
43+
44+ const CJS = fs.createWriteStream('../dist/open-props.cjs')
45+ CJS.end(`module.exports = ${JSON.stringify(toObject(), null, 2)}`)
46+
47+ // const UMD = fs.createWriteStream('../dist/open-props.umd.js')
48+ // UMD.end(`module.exports = ${JSON.stringify(toObject(), null, 2)}`)
49+
50+ const TS = fs.createWriteStream('../src/open-props.ts')
51+ TS.end(`export default ${JSON.stringify(toObject(), null, 2)}`)
52+
53+ const TSD = fs.createWriteStream('../dist/open-props.d.ts')
54+ TSD.end(`declare const OpenProps: ${JSON.stringify(toTypes(), null, 2).replaceAll(',',';')};\nexport default OpenProps;`)
55+
56+ preparedTypes().forEach(({filename, json}) => {
57+ let bundle = fs.createWriteStream('../src/props.'+filename+'.d.ts');
58+ bundle.end(`declare const _default: ${JSON.stringify(json, null, 2).replaceAll(',',';')};\nexport default _default;`)
59+ })
60+
61 // gen prop variants
62 Object.entries({
63 ...mainbundle,
64 diff --git a/build/to-object.js b/build/to-object.js
65new file mode 100644
66index 0000000..42d3ccd
67--- /dev/null
68+++ b/build/to-object.js
69 @@ -0,0 +1,35 @@
70+ import Animations from '../src/props.animations.js'
71+ import Sizes from '../src/props.sizes.js'
72+ import Colors from '../src/props.colors.js'
73+ import ColorsHSL from '../src/props.colors-hsl.js'
74+ import Fonts from '../src/props.fonts.js'
75+ import Borders from '../src/props.borders.js'
76+ import Aspects from '../src/props.aspects.js'
77+ import Easings from '../src/props.easing.js'
78+ import Gradients from '../src/props.gradients.js'
79+ import Shadows from '../src/props.shadows.js'
80+ import SVG from '../src/props.svg.js'
81+ import Zindex from '../src/props.zindex.js'
82+ import MaskEdges from '../src/props.masks.edges.js'
83+ import MaskCornerCuts from '../src/props.masks.corner-cuts.js'
84+
85+ import {mapToObjectNotation} from './utils.js'
86+
87+ export const toObject = () => {
88+ return mapToObjectNotation({
89+ ...Animations,
90+ ...Sizes,
91+ ...Colors,
92+ ...ColorsHSL,
93+ ...Fonts,
94+ ...Borders,
95+ ...Aspects,
96+ ...Easings,
97+ ...SVG,
98+ ...Gradients,
99+ ...Shadows,
100+ ...Zindex,
101+ ...MaskEdges,
102+ ...MaskCornerCuts,
103+ })
104+ }
105\ No newline at end of file
106 diff --git a/build/to-types.js b/build/to-types.js
107new file mode 100644
108index 0000000..a8d2b24
109--- /dev/null
110+++ b/build/to-types.js
111 @@ -0,0 +1,66 @@
112+ import Animations from '../src/props.animations.js'
113+ import Sizes from '../src/props.sizes.js'
114+ import Colors from '../src/props.colors.js'
115+ import ColorsHSL from '../src/props.colors-hsl.js'
116+ import Fonts from '../src/props.fonts.js'
117+ import Borders from '../src/props.borders.js'
118+ import Aspects from '../src/props.aspects.js'
119+ import Easings from '../src/props.easing.js'
120+ import Gradients from '../src/props.gradients.js'
121+ import Shadows from '../src/props.shadows.js'
122+ import SVG from '../src/props.svg.js'
123+ import Zindex from '../src/props.zindex.js'
124+ import MaskEdges from '../src/props.masks.edges.js'
125+ import MaskCornerCuts from '../src/props.masks.corner-cuts.js'
126+
127+ import {mapToObjectNotation} from './utils.js'
128+
129+ const mapTypes = collection =>
130+ Object.fromEntries(Object.entries(collection)
131+ .map(([key, val]) =>
132+ [key, typeof val]))
133+
134+ export const toTypes = () => {
135+ return mapToObjectNotation({
136+ ...mapTypes(Animations),
137+ ...mapTypes(Sizes),
138+ ...mapTypes(Colors),
139+ ...mapTypes(ColorsHSL),
140+ ...mapTypes(Fonts),
141+ ...mapTypes(Borders),
142+ ...mapTypes(Aspects),
143+ ...mapTypes(Easings),
144+ ...mapTypes(SVG),
145+ ...mapTypes(Gradients),
146+ ...mapTypes(Shadows),
147+ ...mapTypes(Zindex),
148+ ...mapTypes(MaskEdges),
149+ ...mapTypes(MaskCornerCuts),
150+ })
151+ }
152+
153+ export const preparedTypes = () => {
154+ return [
155+ {filename: 'animations', props: Animations},
156+ {filename: 'sizes', props: Sizes},
157+ {filename: 'colors', props: Colors},
158+ {filename: 'colors-hsl', props: ColorsHSL},
159+ {filename: 'fonts', props: Fonts},
160+ {filename: 'borders', props: Borders},
161+ {filename: 'aspects', props: Aspects},
162+ {filename: 'easings', props: Easings},
163+ {filename: 'svg', props: SVG},
164+ {filename: 'gradients', props: Gradients},
165+ {filename: 'shadows', props: Shadows},
166+ {filename: 'zindex', props: Zindex},
167+ {filename: 'masks-edges', props: MaskEdges},
168+ {filename: 'masks-corner-cuts', props: MaskCornerCuts},
169+ ].map(({filename, props}) => {
170+ const json = mapToObjectNotation(mapTypes(props))
171+
172+ return {
173+ filename,
174+ json,
175+ }
176+ })
177+ }
178\ No newline at end of file
179 diff --git a/build/utils.js b/build/utils.js
180new file mode 100644
181index 0000000..0fdf30f
182--- /dev/null
183+++ b/build/utils.js
184 @@ -0,0 +1,12 @@
185+ export const camelize = text => {
186+ text = text.replace(/[-]+(.)?/g, (_, c) => c
187+ ? c.toUpperCase()
188+ : '')
189+ return text.substr(0, 1).toLowerCase() + text.substr(1)
190+ }
191+
192+ export const mapToObjectNotation = props => {
193+ for (var prop in props)
194+ props[camelize(prop)] = props[prop]
195+ return props
196+ }
197\ No newline at end of file
198 diff --git a/package.json b/package.json
199index 2bb90dc..54441c9 100644
200--- a/package.json
201+++ b/package.json
202 @@ -20,8 +20,10 @@
203 "main": "dist/open-props.cjs",
204 "unpkg": "open-props.min.css",
205 "module": "dist/open-props.module.js",
206+ "types": "dist/open-props.d.ts",
207 "exports": {
208 ".": {
209+ "types": "./dist/open-props.d.ts",
210 "import": "./dist/open-props.module.js",
211 "require": "./dist/open-props.cjs",
212 "default": "./dist/open-props.cjs"
213 @@ -178,14 +180,11 @@
214 "scripts": {
215 "build": "concurrently npm:gen:op npm:gen:shadowdom",
216 "test": "ava test/basic.test.cjs",
217- "bundle": "concurrently npm:lib:* -m 25 && concurrently npm:shadow:* -m 25 && npm run module:js",
218- "bundle:pre-edit": "json -I -f package.json -e \"this.unpkg=''\"",
219- "bundle:post-edit": "json -I -f package.json -e \"this.unpkg='open-props.min.css'\"",
220+ "bundle": "concurrently npm:lib:* -m 25 && concurrently npm:shadow:* -m 25",
221 "gen:op": "cd build && node props.js \"\" true",
222 "gen:nowhere": "cd build && node props \"\" false",
223 "gen:shadowdom": "cd build && node props \"\" false \":host\" \"shadow\"",
224 "gen:prefixed": "cd build && node props.js \"op\" true",
225- "module:js": "npm run bundle:pre-edit && microbundle --no-sourcemap && npm run bundle:post-edit",
226 "lib:all": "postcss src/index.css -o open-props.min.css",
227 "lib:normalize": "postcss src/extra/normalize.css -o normalize.min.css && node ./build/extras.js",
228 "lib:normalize:light": "postcss src/extra/normalize.light.css -o normalize.light.min.css",
229 @@ -305,7 +304,6 @@
230 "concurrently": "^7.2.2",
231 "cssnano": "^5.1.10",
232 "json": "^11.0.0",
233- "microbundle": "^0.13.3",
234 "open-color": "^1.9.1",
235 "postcss": "^8.3.9",
236 "postcss-cli": "^8.3.1",
237 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
238index 9122c44..270c777 100644
239--- a/test/basic.test.cjs
240+++ b/test/basic.test.cjs
241 @@ -51,4 +51,9 @@ test('Should produce normalize files', async t => {
242 test('Should produce optional mask props', async t => {
243 t.assert(fs.existsSync('./masks.edges.min.css'))
244 t.assert(fs.existsSync('./masks.corner-cuts.min.css'))
245+ })
246+
247+ test('Should produce typings files', async t => {
248+ t.assert(fs.existsSync('./dist/open-props.d.ts'))
249+ t.assert(fs.existsSync('./src/props.sizes.d.ts'))
250 })
251\ No newline at end of file