dls-graphics - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

build/index.js

@@ -14,5 +14,6 @@ import fs from 'fs'
 const DIST_DIR = resolve(__dirname, '../dist')
-const SEPARATED_DIR = resolve(__dirname, '../dist/separated')
+const SEPARATE_DIR = resolve(__dirname, '../dist/separate')
 
 const ENTRY_MODULE = resolve(DIST_DIR, 'index.js')
+const ENTRY_SEPARATE_MODULE = resolve(SEPARATE_DIR, 'index.js')
 const EXPORT_TPL = resolve(__dirname, './export.ejs')
@@ -27,20 +28,29 @@
   clearDir(DIST_DIR)
-  clearDir(SEPARATED_DIR)
+  clearDir(SEPARATE_DIR)
 
+  const exportsSingle = []
+  const exportsSeparate = []
   const renderExport = compile(await readFile(EXPORT_TPL, 'utf8'))
-  const exports = []
   const files = await readdir(SRC_DIR)
 
-  await Promise.all(files.map(async file => {
-    const inputFile = resolve(SRC_DIR, file)
-    const content = await readFile(inputFile, 'utf8')
+  await Promise.all(
+    files.map(async (file) => {
+      const inputFile = resolve(SRC_DIR, file)
+      const content = await readFile(inputFile, 'utf8')
 
-    const data = await processContent(file, content, { extractCss: false })
-    await processContent(file, content, { extractCss: true })
+      const data = await processContent(file, content, { extractCss: false })
+      const dataSeparate = await processContent(file, content, {
+        extractCss: true
+      })
 
-    const variable = camelCase(basename(file, extname(file)))
-    exports.push(renderExport({ variable, data: stringify(data) }))
-  }))
+      const variable = camelCase(basename(file, extname(file)))
+      exportsSingle.push(renderExport({ variable, data: stringify(data) }))
+      exportsSeparate.push(
+        renderExport({ variable, data: stringify(dataSeparate) })
+      )
+    })
+  )
 
-  await writeFile(ENTRY_MODULE, exports.join('\n'), 'utf8')
+  await writeFile(ENTRY_MODULE, exportsSingle.join('\n'), 'utf8')
+  await writeFile(ENTRY_SEPARATE_MODULE, exportsSeparate.join('\n'), 'utf8')
 
@@ -53,3 +63,3 @@ console.log('Build complete.')
   const base = basename(file, extname(file))
-  const outputDir = extractCss ? SEPARATED_DIR : DIST_DIR
+  const outputDir = extractCss ? SEPARATE_DIR : DIST_DIR
   const outputSvgFile = resolve(outputDir, `${base}.svg`)
@@ -56,0 +66,0 @@ const outputCssFile = resolve(outputDir, `${base}.css`)

build/svg.js

@@ -70,2 +70,6 @@ import Svgo from 'svgo'
 
+    if (css) {
+      data.css = css
+    }
+
     return {
@@ -72,0 +76,0 @@ svg,

CHANGELOG.md

 > ⚠️ - Breaking Changes
 
+## 0.1.1
+
+- ⚠️ Renamed `dist/separated` to `dist/separate`.
+- Added separate data to ES output.
+
 ## 0.1.0
 
 - First release, add loading/forbidden/not-found/server-error.

dist/index.js

@@ -10,2 +10,11 @@ export const forbidden = {
 
+export const serverError = {
+	contents: '<g fill="none" fill-rule="evenodd"><path d="M-9-10H91V90H-9z"/><g stroke="#A8B0BF" stroke-width="2.8" transform="translate(41 38)"><circle cx="20" cy="20" r="20"/><g stroke-linecap="round" stroke-linejoin="round"><path d="M14 14l11.314 11.314M25.314 14L14 25.314"/></g></g><g transform="translate(2 2)"><rect width="66" height="20" stroke="#A8B0BF" stroke-width="2.8" rx="10"/><rect width="26" height="6" x="31" y="7" fill="#E2E6F0" rx="3"/><rect width="4" height="4" x="9" y="8" fill="#A8B0BF" rx="2"/></g><g transform="translate(2 28)"><path stroke="#A8B0BF" stroke-linecap="round" stroke-width="2.8" d="M33.394 20h-23.33C4.506 20 0 15.523 0 10S4.506 0 10.064 0h47.215A9.819 9.819 0 0166 5.278"/><rect width="11" height="6" x="31" y="7" fill="#E2E6F0" rx="3"/><rect width="4" height="4" x="9" y="8" fill="#A8B0BF" rx="2"/></g><g transform="translate(2 54)"><path stroke="#A8B0BF" stroke-linecap="round" stroke-width="2.8" d="M37.479 20H10C4.477 20 0 15.523 0 10S4.477 0 10 0h21.333"/><rect width="4" height="6" x="31" y="7" fill="#E2E6F0" rx="2"/><rect width="4" height="4" x="9" y="8" fill="#A8B0BF" rx="2"/></g></g>',
+	attrs: {
+		width: '83',
+		height: '80',
+		viewBox: '0 0 83 80'
+	}
+}
+
 export const notFound = {
@@ -20,11 +29,2 @@ contents: '<g fill="none" fill-rule="evenodd"><path d="M-6-9H94V91H-6z"/><g transform="translate(-1 2)"><path stroke="#A8B0BF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.8" d="M69.647 10.521C63.134 4.02 54.143 0 44.214 0c-19.882 0-36 16.118-36 36s16.118 36 36 36 36-16.118 36-36c0-5.626-1.29-10.952-3.592-15.695"/><path stroke="#A8B0BF" stroke-linecap="round" stroke-width="2.8" d="M48.922 71.567c1.262-2.103.694-6.718-3.059-8.355-3.752-1.638-6.758 2.067-9.432 2.387-2.675.32-5.006-2.695-7.293 1.461M59.307 5.379a5 5 0 11-9.272-3.746"/><path fill="#E2E6F0" fill-rule="nonzero" d="M29.298 10.22a1.75 1.75 0 111.697 3.06c-6.69 3.71-11.563 10.091-13.328 17.561a1.75 1.75 0 01-3.406-.804c1.992-8.435 7.49-15.632 15.037-19.817z"/><circle cx="14.964" cy="36.75" r="1.75" fill="#E2E6F0"/><path stroke="#A8B0BF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.8" d="M8.214 37.879c-4.532 3.626-6.344 6.669-5.535 9.687 1.434 5.351 12.219 7.419 26.656 5.9m9.08-1.349c3.06-.579 6.215-1.297 9.422-2.157 22.94-6.146 39.913-17.184 37.912-24.652-.774-2.886-3.895-5.008-9.125-5.008"/></g></g>',
 
-export const serverError = {
-	contents: '<g fill="none" fill-rule="evenodd"><path d="M-9-10H91V90H-9z"/><g stroke="#A8B0BF" stroke-width="2.8" transform="translate(41 38)"><circle cx="20" cy="20" r="20"/><g stroke-linecap="round" stroke-linejoin="round"><path d="M14 14l11.314 11.314M25.314 14L14 25.314"/></g></g><g transform="translate(2 2)"><rect width="66" height="20" stroke="#A8B0BF" stroke-width="2.8" rx="10"/><rect width="26" height="6" x="31" y="7" fill="#E2E6F0" rx="3"/><rect width="4" height="4" x="9" y="8" fill="#A8B0BF" rx="2"/></g><g transform="translate(2 28)"><path stroke="#A8B0BF" stroke-linecap="round" stroke-width="2.8" d="M33.394 20h-23.33C4.506 20 0 15.523 0 10S4.506 0 10.064 0h47.215A9.819 9.819 0 0166 5.278"/><rect width="11" height="6" x="31" y="7" fill="#E2E6F0" rx="3"/><rect width="4" height="4" x="9" y="8" fill="#A8B0BF" rx="2"/></g><g transform="translate(2 54)"><path stroke="#A8B0BF" stroke-linecap="round" stroke-width="2.8" d="M37.479 20H10C4.477 20 0 15.523 0 10S4.477 0 10 0h21.333"/><rect width="4" height="6" x="31" y="7" fill="#E2E6F0" rx="2"/><rect width="4" height="4" x="9" y="8" fill="#A8B0BF" rx="2"/></g></g>',
-	attrs: {
-		width: '83',
-		height: '80',
-		viewBox: '0 0 83 80'
-	}
-}
-
 export const loading = {
@@ -31,0 +31,0 @@ contents: '<g style="transform-origin:50% 50%;animation:spin-359eb 2s linear infinite"><circle cx="50%" cy="50%" r="29" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="6" style="transform-origin:50% 50%;transform:rotate(-90deg);stroke-dasharray:182.21;stroke-dashoffset:163.99;animation:scale-359eb 2s infinite"/></g><style>@keyframes spin-359eb{0%{transform:rotate(0deg)}to{transform:rotate(450deg)}}@keyframes scale-359eb{0%{animation-timing-function:cubic-bezier(.33,0,.2,1);stroke-dashoffset:163.99}60%{animation-timing-function:cubic-bezier(.33,0,.33,1);stroke-dashoffset:27.33;transform:rotate(-90deg)}to{stroke-dashoffset:163.99;transform:rotate(180deg)}}@keyframes simple-spin-359eb{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}.dls-loading,_:-ms-lang(x){animation:simple-spin-359eb 1s linear infinite}.dls-loading circle,_:-ms-lang(x){stroke-dashoffset:136.66}</style>',

package.json

 {
   "name": "dls-graphics",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Graphics materials for Baidu Light DLS.",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -13,11 +13,68 @@ # dls-graphics
 
-Currenly all graphics are distributed as SVG files.
+### JavaScript
 
-### Standalone
+```js
+import { loading } from 'dls-graphics'
 
+console.log(loading)
+/*
+{
+  contents: '<g style="transform-origin:50% 50%;animation:spin-359eb...',
+  attrs: {
+    width: '40',
+    height: '40',
+    class: 'dls-loading',
+    viewBox: '0 0 64 64'
+  }
+}
+*/
+```
+
+For example, to use it in a React component:
+
+```js
+import { loading } from 'dls-graphics'
+
+export function IconLoading() {
+  return (
+    <svg
+      {...loading.attrs}
+      dangerouslySetInnerHTML={{ __html: loading.contents }}
+    />
+  )
+}
+```
+
+#### Separate
+
+To get `<style>` contents extracted outside SVG data, you can use:
+
+```js
+import { loading } from 'dls-graphics/dist/separate'
+
+console.log(loading)
+/*
+{
+  contents: '<g style="transform-origin:50% 50%;animation:spin-359eb...',
+  attrs: {
+    width: '40',
+    height: '40',
+    class: 'dls-loading',
+    viewBox: '0 0 64 64'
+  },
+  css: '@keyframes spin-359eb{0%{transform:rotate(0deg)}to{transform...'
+}
+*/
+```
+
+### SVG assets
+
+All graphics are also distributed as SVG files. You can acquire these minified SVG source to use properly. eg. import and render into your HTML file with webpack's `HtmlWebpackPlugin`, or use with some custom SVG loader to convert them directly into components.
+
+#### Standalone
+
 Standalone SVGs resides at `dls-graphics/dist`.
 
-### Extracted
+#### Separate
 
-If you want to use SVGs with `<style>` contents extracted into separate CSS files, you can look into `dls-graphics/dist/separated`
-
+If you want to use SVGs with `<style>` contents extracted into separate CSS files, you can look into `dls-graphics/dist/separate`.

No alert changes

Improved metrics

Total package byte prevSize

36662

increased by20.13%

Number of package files

24

increased by9.09%

Lines of code

304

increased by25.1%

Number of lines in readme file

80

increased by247.83%

No dependency changes