{ButtomDemoCode}', '')
+
+ return highlight.fixMarkup(highlightedContent)
+ }
+ })
+
+const formatModule = (imports, js, jsx, state, method) => {
+ const moduleText = `
+ ${imports}
+
+ ${js}
+
+ class MarkdownItReactComponent extends React.Component {
+ constructor(props){
+ super(props);
+ this.state = ${state || '{}'};
+ Object.assign(this,props.methods)
+ }
+ handleToggleCode(flag){
+ const state = {};
+ state['showCode' + flag] = !this.state['showCode' + flag];
+ this.setState(state);
+ }
+ handleCopyCode (code) {
+ copy(code)
+ }
+ ${method || ''}
+ render(){
+
+ return (
+
+ ${jsx}
+
+ );
+ }
+ };
+
+ export default MarkdownItReactComponent;`
+
+ return moduleText
+}
+
+const formatOpening = () => `
+
+ `
+
+const formatClosing = () => `
+
+ `
+
+module.exports = function (source) {
+ this.cacheable()
+ // init options
+
+ const _options = loaderUtils.getOptions(this) || {}
+
+ Object.assign(
+ options,
+ _options.markdownItReact ? _options.markdownItReact() : {}
+ )
+
+ const {
+ body,
+ attributes: { imports: importMap }
+ } = frontMatter(source)
+
+ const imports = `import * as React from 'react'; import copy from 'copy-to-clipboard';${importMap}`
+
+ const moduleJS = []
+ const state = ''
+ // 放在这里应该没有问题， 反正是顺序执行的
+ let flag = ''
+
+ md.use(mdContainer, 'demo', {
+ validate: params => params.trim().match(/^demo\s*(.*)$/),
+ render: (tokens, idx) => {
+ // container 从开头到结尾把之间的token跑一遍，其中idx定位到具体的位置
+
+ // 获取描述
+ const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/)
+
+ // 有此标记代表 ::: 开始
+ if (tokens[idx].nesting === 1) {
+ flag = idx
+
+ let codeText = ''
+ // let state = null
+ // let method = ''
+ let i = 1
+
+ // 从 ::: 下一个token开始
+ let token = tokens[idx + i]
+
+ // 如果没有到结尾
+ while (token.markup !== ':::') {
+ // 只认```，其他忽略
+ if (token.markup === '```') {
+ // 里面的内容都当代码文本输出
+ codeText = token.content
+ }
+ i++
+ token = tokens[idx + i]
+ }
+ // 描述也执行md
+ return formatOpening(codeText, md.render(m[1]), flag)
+ }
+ return formatClosing(flag)
+ }
+ })
+
+ // md 处理过后的字符串含有 class 和 style ，需要再次处理给到react
+ const content = md
+ .render(body)
+ .replace(/
/g, '
')
+ .replace(/
/g, '
')
+ .replace(/class=/g, 'className=')
+ .replace(/style="text-align:center"/g, 'style={{ textAlign: "center"}}')
+ .replace(/style="text-align:left"/g, 'style={{ textAlign: "left"}}')
+ .replace(/style="text-align:right"/g, 'style={{ textAlign: "right"}}')
+ return formatModule(imports, moduleJS.join('\n'), content, state)
+}
diff --git a/webpack/docs.config.js b/webpack/docs.config.js
index 3619fac..60db070 100644
--- a/webpack/docs.config.js
+++ b/webpack/docs.config.js
@@ -45,9 +45,13 @@ module.exports = {
loader: require.resolve('ts-loader'),
exclude: /node_modules/
},
+ // {
+ // test: /\.md$/,
+ // loader: require.resolve('raw-loader')
+ // },
{
test: /\.md$/,
- loader: require.resolve('raw-loader')
+ loader: `babel-loader!${path.join(__dirname, './addImportLoader.js')}`
},
{
test: /\.css$/,
diff --git a/webpack/webpack.dev.conf.js b/webpack/webpack.dev.conf.js
index 229a681..fc30b14 100644
--- a/webpack/webpack.dev.conf.js
+++ b/webpack/webpack.dev.conf.js
@@ -41,12 +41,16 @@ module.exports = {
rules: [
{
test: /\.tsx?$/,
- loader: require.resolve('ts-loader'),
+ loader: 'awesome-typescript-loader',
exclude: /node_modules/
},
+ // {
+ // test: /\.md$/,
+ // loader: require.resolve('raw-loader')
+ // },
{
test: /\.md$/,
- loader: require.resolve('raw-loader')
+ loader: `babel-loader!${path.join(__dirname, './addImportLoader.js')}`
},
{
test: /\.css$/,
From e8a187c525430b733a4eaae70f1775a3b42066e1 Mon Sep 17 00:00:00 2001
From: Muyunyun <328375795@qq.com>
Date: Thu, 4 Apr 2019 14:38:45 +0800
Subject: [PATCH 3/8] =?UTF-8?q?feat:=20snake-design=20=E6=A0=B7=E5=BC=8F?=
=?UTF-8?q?=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/components/Breadcrumb/README.md | 19 +-
docs/components/Button/README.md | 17 +-
docs/layout/docs.scss | 147 ++++++
docs/layout/index.tsx | 3 +-
docs/layout/prism/index.tsx | 20 +
docs/layout/prism/prism.js | 641 +++++++++++++++++++++++++++
docs/layout/prism/prism.scss | 187 ++++++++
docs/types/index.d.ts | 3 +-
package.json | 2 +
9 files changed, 1022 insertions(+), 17 deletions(-)
create mode 100644 docs/layout/docs.scss
create mode 100644 docs/layout/prism/index.tsx
create mode 100644 docs/layout/prism/prism.js
create mode 100644 docs/layout/prism/prism.scss
diff --git a/docs/components/Breadcrumb/README.md b/docs/components/Breadcrumb/README.md
index cbbf08e..23342c2 100644
--- a/docs/components/Breadcrumb/README.md
+++ b/docs/components/Breadcrumb/README.md
@@ -1,18 +1,25 @@
+---
+imports:
+ import ButtomDemoCode from '!raw-loader!./simple.tsx';
+ import BreadCrumbDemo from './simple.tsx';
+ import Code from '../../layout/prism/index'
+---
+
# Breadcrumb 面包屑
导航类组件，便于在几个关联页面之间快速跳转
-## 代码示例
+### 简单示例
:::demo
+各种类型的按钮
-### 简单示例
+{ButtomDemoCode}
## Props
diff --git a/docs/components/Button/README.md b/docs/components/Button/README.md
index 77a4863..0df7dc5 100644
--- a/docs/components/Button/README.md
+++ b/docs/components/Button/README.md
@@ -2,28 +2,27 @@
imports:
import ButtomDemoCode from '!raw-loader!./simpleButton.tsx';
import ButtomDemo from './simpleButton.tsx';
+ import Code from '../../layout/prism/index'
---
# Button 按钮
基础组件，触发业务逻辑时使用。
-```js
-12345677
-```
-
-## 代码示例
-
-{ButtomDemoCode}
+### 简单示例
:::demo
-### 简单示例
各种类型的按钮
{ButtomDemoCode}
+
## Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ----------------- | ------ | ------ | ------ |
-| className | 按钮类名 | string | - | - |
+| className | `按钮类名` | string | - | - |
+| className | `按钮类名` | string | - | - |
diff --git a/docs/layout/docs.scss b/docs/layout/docs.scss
new file mode 100644
index 0000000..7e1e8ce
--- /dev/null
+++ b/docs/layout/docs.scss
@@ -0,0 +1,147 @@
+@import '~highlight.js/styles/atom-one-light.css';
+@import '~at-ui-style/src/variables/index.scss';
+@import '~at-ui-style/src/mixins/index.scss';
+
+/* markdown */
+.at-markdown {
+ position: relative;
+ padding: 32px 48px 48px;
+ height: 100%;
+ overflow: auto;
+
+ &--demo {
+ padding-right: 420px;
+ }
+
+ img {
+ vertical-align: middle;
+ }
+
+ table {
+ width: 100%;
+ background-color: #fff;
+ color: #5e6d82;
+ font-size: 14px;
+ // margin-bottom: 45px;
+ border-collapse: collapse;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+
+ th {
+ text-align: left;
+ border-top: 1px solid $border-color-lightest;
+ background-color: #fafbfc;
+ }
+
+ td,
+ th {
+ border-bottom: 1px solid $border-color-lightest;
+ padding: 10px 8px;
+
+ &:first-child {
+ padding-left: 10px;
+ }
+ }
+ }
+
+ >div {
+ margin: 0 auto;
+
+ >h1,
+ >h2,
+ >h3,
+ >h4 {
+ margin: 16px 0;
+ line-height: 1.5;
+ }
+
+ >h1 {
+ margin-top: 0;
+ font-size: 24px;
+ }
+
+ >h2,
+ >h3 {
+ margin-top: 24px;
+ }
+
+ >hr {
+ margin: 1.2em 0;
+ border: 0;
+ border-bottom: 1px solid $border-color-base;
+ }
+
+ >p {
+ padding: 0;
+ line-height: 1.7;
+
+ +p {
+ margin-top: 8px;
+ }
+ }
+
+ code {
+ // padding: 0.3em 0.5em;
+ // font-size: 0.9em;
+ // vertical-align: middle;
+ // border: 1px solid $grey-100;
+ // border-radius: 2px;
+ // background-color: $grey-50;
+ //@at-root
+ padding: 3px;
+ // padding-top: 0.2em;
+ // padding-bottom: 0.2em;
+ margin: 0;
+ font-size: 85%;
+ // background-color: rgba(0,0,0,0.04);
+ border-radius: 3px;
+ background: rgba(255, 229, 100, 0.2);
+ color: #ffa7c4;
+ padding-top: 4px;
+ font-style: italic;
+ font-weight: bold;
+ }
+
+ pre {
+ margin: 16px 0;
+ padding: 16px;
+ background-color: #011627;
+ overflow: auto;
+ border-radius: 4px;
+
+ code {
+ padding: 0;
+ font-size: 1em;
+ border: none;
+ border-radius: 0;
+ background-color: transparent;
+ color: #ffa7c4;
+ }
+ }
+
+ >blockquote {
+ margin: 16px 0;
+ padding: 0 15px;
+ color: $grey-400;
+ border-left: 4px solid $grey-100;
+
+ p {
+ color: $grey-900;
+ }
+ }
+
+ >ul {
+ margin: 16px 0;
+ padding-left: 24px;
+ list-style: disc;
+
+ li {
+ line-height: 1.8;
+ }
+ }
+
+ >table {
+ margin: 24px 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/layout/index.tsx b/docs/layout/index.tsx
index a057564..5af29df 100644
--- a/docs/layout/index.tsx
+++ b/docs/layout/index.tsx
@@ -1,6 +1,7 @@
import * as React from 'react'
import { Link } from 'react-router-dom'
import DocsNav from './docsNav'
+import './docs.scss'
export default class App extends React.Component {
@@ -25,7 +26,7 @@ export default class App extends React.Component {
basicCList={this.props.basicCList}
aboutSnakeDesignList={this.props.aboutSnakeDesignList}
/>
- {children}
+ {children}
]
diff --git a/docs/layout/prism/index.tsx b/docs/layout/prism/index.tsx
new file mode 100644
index 0000000..5e4ae8d
--- /dev/null
+++ b/docs/layout/prism/index.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { PrismCode } from 'react-prism'
+import './prism'
+import './prism.scss'
+
+class Code extends React.Component {
+ render() {
+ const { children } = this.props
+
+ return (
+
+
+ {children}
+
+
+ )
+ }
+}
+
+export default Code
diff --git a/docs/layout/prism/prism.js b/docs/layout/prism/prism.js
new file mode 100644
index 0000000..50ab8fc
--- /dev/null
+++ b/docs/layout/prism/prism.js
@@ -0,0 +1,641 @@
+/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+json+jsx&plugins=previewer-base */
+var _self =
+ 'undefined' != typeof window
+ ? window
+ : 'undefined' != typeof WorkerGlobalScope &&
+ self instanceof WorkerGlobalScope
+ ? self
+ : {},
+ Prism = (function() {
+ var e = /\blang(?:uage)?-(\w+)\b/i,
+ t = 0,
+ n = (_self.Prism = {
+ manual: _self.Prism && _self.Prism.manual,
+ util: {
+ encode: function(e) {
+ return e instanceof a
+ ? new a(e.type, n.util.encode(e.content), e.alias)
+ : 'Array' === n.util.type(e)
+ ? e.map(n.util.encode)
+ : e
+ .replace(/&/g, '&')
+ .replace(/ e.length) return
+ if (!(w instanceof s)) {
+ h.lastIndex = 0
+ var _ = h.exec(w),
+ P = 1
+ if (!_ && m && b != t.length - 1) {
+ if (((h.lastIndex = k), (_ = h.exec(e)), !_)) break
+ for (
+ var A = _.index + (d ? _[1].length : 0),
+ j = _.index + _[0].length,
+ x = b,
+ O = k,
+ S = t.length;
+ S > x && (j > O || (!t[x].type && !t[x - 1].greedy));
+ ++x
+ )
+ (O += t[x].length), A >= O && (++b, (k = O))
+ if (t[b] instanceof s || t[x - 1].greedy) continue
+ ;(P = x - b), (w = e.slice(k, O)), (_.index -= k)
+ }
+ if (_) {
+ d && (p = _[1].length)
+ var A = _.index + p,
+ _ = _[0].slice(p),
+ j = A + _.length,
+ N = w.slice(0, A),
+ C = w.slice(j),
+ E = [b, P]
+ N && (++b, (k += N.length), E.push(N))
+ var L = new s(u, f ? n.tokenize(_, f) : _, y, _, m)
+ if (
+ (E.push(L),
+ C && E.push(C),
+ Array.prototype.splice.apply(t, E),
+ 1 != P && n.matchGrammar(e, t, a, b, k, !0, u),
+ l)
+ )
+ break
+ } else if (l) break
+ }
+ }
+ }
+ }
+ },
+ tokenize: function(e, t) {
+ var a = [e],
+ r = t.rest
+ if (r) {
+ for (var i in r) t[i] = r[i]
+ delete t.rest
+ }
+ return n.matchGrammar(e, a, t, 0, 0, !1), a
+ },
+ hooks: {
+ all: {},
+ add: function(e, t) {
+ var a = n.hooks.all
+ ;(a[e] = a[e] || []), a[e].push(t)
+ },
+ run: function(e, t) {
+ var a = n.hooks.all[e]
+ if (a && a.length) for (var r, i = 0; (r = a[i++]); ) r(t)
+ }
+ }
+ }),
+ a = (n.Token = function(e, t, n, a, r) {
+ ;(this.type = e),
+ (this.content = t),
+ (this.alias = n),
+ (this.length = 0 | (a || '').length),
+ (this.greedy = !!r)
+ })
+ if (
+ ((a.stringify = function(e, t, r) {
+ if ('string' == typeof e) return e
+ if ('Array' === n.util.type(e))
+ return e
+ .map(function(n) {
+ return a.stringify(n, t, e)
+ })
+ .join('')
+ var i = {
+ type: e.type,
+ content: a.stringify(e.content, t, r),
+ tag: 'span',
+ classes: ['token', e.type],
+ attributes: {},
+ language: t,
+ parent: r
+ }
+ if (
+ ('comment' == i.type && (i.attributes.spellcheck = 'true'), e.alias)
+ ) {
+ var l = 'Array' === n.util.type(e.alias) ? e.alias : [e.alias]
+ Array.prototype.push.apply(i.classes, l)
+ }
+ n.hooks.run('wrap', i)
+ var o = Object.keys(i.attributes)
+ .map(function(e) {
+ return (
+ e + '="' + (i.attributes[e] || '').replace(/"/g, '"') + '"'
+ )
+ })
+ .join(' ')
+ return (
+ '<' +
+ i.tag +
+ ' class="' +
+ i.classes.join(' ') +
+ '"' +
+ (o ? ' ' + o : '') +
+ '>' +
+ i.content +
+ ''
+ )
+ }),
+ !_self.document)
+ )
+ return _self.addEventListener
+ ? (_self.addEventListener(
+ 'message',
+ function(e) {
+ var t = JSON.parse(e.data),
+ a = t.language,
+ r = t.code,
+ i = t.immediateClose
+ _self.postMessage(n.highlight(r, n.languages[a], a)),
+ i && _self.close()
+ },
+ !1
+ ),
+ _self.Prism)
+ : _self.Prism
+ var r =
+ document.currentScript ||
+ [].slice.call(document.getElementsByTagName('script')).pop()
+ return (
+ r &&
+ ((n.filename = r.src),
+ !document.addEventListener ||
+ n.manual ||
+ r.hasAttribute('data-manual') ||
+ ('loading' !== document.readyState
+ ? window.requestAnimationFrame
+ ? window.requestAnimationFrame(n.highlightAll)
+ : window.setTimeout(n.highlightAll, 16)
+ : document.addEventListener('DOMContentLoaded', n.highlightAll))),
+ _self.Prism
+ )
+ })()
+'undefined' != typeof module && module.exports && (module.exports = Prism),
+ 'undefined' != typeof global && (global.Prism = Prism)
+;(Prism.languages.markup = {
+ comment: //,
+ prolog: /<\?[\s\S]+?\?>/,
+ doctype: //i,
+ cdata: //i,
+ tag: {
+ pattern: /<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\s\S])*\1|[^\s'">=]+))?)*\s*\/?>/i,
+ inside: {
+ tag: {
+ pattern: /^<\/?[^\s>\/]+/i,
+ inside: { punctuation: /^<\/?/, namespace: /^[^\s>\/:]+:/ }
+ },
+ 'attr-value': {
+ pattern: /=(?:('|")[\s\S]*?(\1)|[^\s>]+)/i,
+ inside: { punctuation: /[=>"']/ }
+ },
+ punctuation: /\/?>/,
+ 'attr-name': {
+ pattern: /[^\s>\/]+/,
+ inside: { namespace: /^[^\s>\/:]+:/ }
+ }
+ }
+ },
+ entity: /&#?[\da-z]{1,8};/i
+}),
+ (Prism.languages.markup.tag.inside['attr-value'].inside.entity =
+ Prism.languages.markup.entity),
+ Prism.hooks.add('wrap', function(a) {
+ 'entity' === a.type &&
+ (a.attributes.title = a.content.replace(/&/, '&'))
+ }),
+ (Prism.languages.xml = Prism.languages.markup),
+ (Prism.languages.html = Prism.languages.markup),
+ (Prism.languages.mathml = Prism.languages.markup),
+ (Prism.languages.svg = Prism.languages.markup)
+;(Prism.languages.css = {
+ comment: /\/\*[\s\S]*?\*\//,
+ atrule: { pattern: /@[\w-]+?.*?(;|(?=\s*\{))/i, inside: { rule: /@[\w-]+/ } },
+ url: /url\((?:(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,
+ selector: /[^\{\}\s][^\{\};]*?(?=\s*\{)/,
+ string: {
+ pattern: /("|')(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+ greedy: !0
+ },
+ property: /(\b|\B)[\w-]+(?=\s*:)/i,
+ important: /\B!important\b/i,
+ function: /[-a-z0-9]+(?=\()/i,
+ punctuation: /[(){};:]/
+}),
+ (Prism.languages.css.atrule.inside.rest = Prism.util.clone(
+ Prism.languages.css
+ )),
+ Prism.languages.markup &&
+ (Prism.languages.insertBefore('markup', 'tag', {
+ style: {
+ pattern: /()[\s\S]*?(?=<\/style>)/i,
+ lookbehind: !0,
+ inside: Prism.languages.css,
+ alias: 'language-css'
+ }
+ }),
+ Prism.languages.insertBefore(
+ 'inside',
+ 'attr-value',
+ {
+ 'style-attr': {
+ pattern: /\s*style=("|').*?\1/i,
+ inside: {
+ 'attr-name': {
+ pattern: /^\s*style/i,
+ inside: Prism.languages.markup.tag.inside
+ },
+ punctuation: /^\s*=\s*['"]|['"]\s*$/,
+ 'attr-value': { pattern: /.+/i, inside: Prism.languages.css }
+ },
+ alias: 'language-css'
+ }
+ },
+ Prism.languages.markup.tag
+ ))
+Prism.languages.clike = {
+ comment: [
+ { pattern: /(^|[^\\])\/\*[\s\S]*?\*\//, lookbehind: !0 },
+ { pattern: /(^|[^\\:])\/\/.*/, lookbehind: !0 }
+ ],
+ string: {
+ pattern: /(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+ greedy: !0
+ },
+ 'class-name': {
+ pattern: /((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,
+ lookbehind: !0,
+ inside: { punctuation: /(\.|\\)/ }
+ },
+ keyword: /\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,
+ boolean: /\b(true|false)\b/,
+ function: /[a-z0-9_]+(?=\()/i,
+ number: /\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,
+ operator: /--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,
+ punctuation: /[{}[\];(),.:]/
+}
+;(Prism.languages.javascript = Prism.languages.extend('clike', {
+ keyword: /\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,
+ number: /\b-?(0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,
+ function: /[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,
+ operator: /-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/
+})),
+ Prism.languages.insertBefore('javascript', 'keyword', {
+ regex: {
+ pattern: /(^|[^\/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^\/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,
+ lookbehind: !0,
+ greedy: !0
+ }
+ }),
+ Prism.languages.insertBefore('javascript', 'string', {
+ 'template-string': {
+ pattern: /`(?:\\\\|\\?[^\\])*?`/,
+ greedy: !0,
+ inside: {
+ interpolation: {
+ pattern: /\$\{[^}]+\}/,
+ inside: {
+ 'interpolation-punctuation': {
+ pattern: /^\$\{|\}$/,
+ alias: 'punctuation'
+ },
+ rest: Prism.languages.javascript
+ }
+ },
+ string: /[\s\S]+/
+ }
+ }
+ }),
+ Prism.languages.markup &&
+ Prism.languages.insertBefore('markup', 'tag', {
+ script: {
+ pattern: /()[\s\S]*?(?=<\/script>)/i,
+ lookbehind: !0,
+ inside: Prism.languages.javascript,
+ alias: 'language-javascript'
+ }
+ }),
+ (Prism.languages.js = Prism.languages.javascript)
+;(Prism.languages.json = {
+ property: /"(?:\\.|[^\\"])*"(?=\s*:)/gi,
+ string: /"(?!:)(?:\\.|[^\\"])*"(?!:)/g,
+ number: /\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee][+-]?\d+)?)\b/g,
+ punctuation: /[{}[\]);,]/g,
+ operator: /:/g,
+ boolean: /\b(true|false)\b/gi,
+ null: /\bnull\b/gi
+}),
+ (Prism.languages.jsonp = Prism.languages.json)
+!(function(a) {
+ var e = a.util.clone(a.languages.javascript)
+ ;(a.languages.jsx = a.languages.extend('markup', e)),
+ (a.languages.jsx.tag.pattern = /<\/?[\w\.:-]+\s*(?:\s+(?:[\w\.:-]+(?:=(?:("|')(\\?[\s\S])*?\1|[^\s'">=]+|(\{[\s\S]*?\})))?|\{\.{3}\w+\}))*\s*\/?>/i),
+ (a.languages.jsx.tag.inside[
+ 'attr-value'
+ ].pattern = /=(?!\{)(?:('|")[\s\S]*?(\1)|[^\s>]+)/i),
+ a.languages.insertBefore(
+ 'inside',
+ 'attr-name',
+ {
+ spread: {
+ pattern: /\{\.{3}\w+\}/,
+ inside: { punctuation: /\{|\}|\./, 'attr-value': /\w+/ }
+ }
+ },
+ a.languages.jsx.tag
+ )
+ var s = a.util.clone(a.languages.jsx)
+ delete s.punctuation,
+ (s = a.languages.insertBefore(
+ 'jsx',
+ 'operator',
+ { punctuation: /=(?={)|[{}[\];(),.:]/ },
+ { jsx: s }
+ )),
+ a.languages.insertBefore(
+ 'inside',
+ 'attr-value',
+ {
+ script: {
+ pattern: /=(\{(?:\{[^}]*\}|[^}])+\})/i,
+ inside: s,
+ alias: 'language-javascript'
+ }
+ },
+ a.languages.jsx.tag
+ )
+})(Prism)
+!(function() {
+ if (
+ 'undefined' != typeof self &&
+ self.Prism &&
+ self.document &&
+ Function.prototype.bind
+ ) {
+ var t = function(t) {
+ var e = 0,
+ s = 0,
+ i = t
+ if (i.parentNode) {
+ do (e += i.offsetLeft), (s += i.offsetTop)
+ while ((i = i.offsetParent) && i.nodeType < 9)
+ i = t
+ do (e -= i.scrollLeft), (s -= i.scrollTop)
+ while ((i = i.parentNode) && !/body/i.test(i.nodeName))
+ }
+ return {
+ top: s,
+ right: innerWidth - e - t.offsetWidth,
+ bottom: innerHeight - s - t.offsetHeight,
+ left: e
+ }
+ },
+ e = /(?:^|\s)token(?=$|\s)/,
+ s = /(?:^|\s)active(?=$|\s)/g,
+ i = /(?:^|\s)flipped(?=$|\s)/g,
+ o = function(t, e, s, i) {
+ ;(this._elt = null),
+ (this._type = t),
+ (this._clsRegexp = RegExp('(?:^|\\s)' + t + '(?=$|\\s)')),
+ (this._token = null),
+ (this.updater = e),
+ (this._mouseout = this.mouseout.bind(this)),
+ (this.initializer = i)
+ var n = this
+ s || (s = ['*']),
+ 'Array' !== Prism.util.type(s) && (s = [s]),
+ s.forEach(function(t) {
+ 'string' != typeof t && (t = t.lang),
+ o.byLanguages[t] || (o.byLanguages[t] = []),
+ o.byLanguages[t].indexOf(n) < 0 && o.byLanguages[t].push(n)
+ }),
+ (o.byType[t] = this)
+ }
+ ;(o.prototype.init = function() {
+ this._elt ||
+ ((this._elt = document.createElement('div')),
+ (this._elt.className = 'prism-previewer prism-previewer-' + this._type),
+ document.body.appendChild(this._elt),
+ this.initializer && this.initializer())
+ }),
+ (o.prototype.check = function(t) {
+ do if (e.test(t.className) && this._clsRegexp.test(t.className)) break
+ while ((t = t.parentNode))
+ t && t !== this._token && ((this._token = t), this.show())
+ }),
+ (o.prototype.mouseout = function() {
+ this._token.removeEventListener('mouseout', this._mouseout, !1),
+ (this._token = null),
+ this.hide()
+ }),
+ (o.prototype.show = function() {
+ if ((this._elt || this.init(), this._token))
+ if (this.updater.call(this._elt, this._token.textContent)) {
+ this._token.addEventListener('mouseout', this._mouseout, !1)
+ var e = t(this._token)
+ ;(this._elt.className += ' active'),
+ e.top - this._elt.offsetHeight > 0
+ ? ((this._elt.className = this._elt.className.replace(i, '')),
+ (this._elt.style.top = e.top + 'px'),
+ (this._elt.style.bottom = ''))
+ : ((this._elt.className += ' flipped'),
+ (this._elt.style.bottom = e.bottom + 'px'),
+ (this._elt.style.top = '')),
+ (this._elt.style.left =
+ e.left + Math.min(200, this._token.offsetWidth / 2) + 'px')
+ } else this.hide()
+ }),
+ (o.prototype.hide = function() {
+ this._elt.className = this._elt.className.replace(s, '')
+ }),
+ (o.byLanguages = {}),
+ (o.byType = {}),
+ (o.initEvents = function(t, e) {
+ var s = []
+ o.byLanguages[e] && (s = s.concat(o.byLanguages[e])),
+ o.byLanguages['*'] && (s = s.concat(o.byLanguages['*'])),
+ t.addEventListener(
+ 'mouseover',
+ function(t) {
+ var e = t.target
+ s.forEach(function(t) {
+ t.check(e)
+ })
+ },
+ !1
+ )
+ }),
+ (Prism.plugins.Previewer = o),
+ Prism.hooks.add('after-highlight', function(t) {
+ ;(o.byLanguages['*'] || o.byLanguages[t.language]) &&
+ o.initEvents(t.element, t.language)
+ })
+ }
+})()
diff --git a/docs/layout/prism/prism.scss b/docs/layout/prism/prism.scss
new file mode 100644
index 0000000..83add64
--- /dev/null
+++ b/docs/layout/prism/prism.scss
@@ -0,0 +1,187 @@
+/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+json+jsx&plugins=previewer-base */
+
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+
+.code {
+ code[class*='language-'],
+ pre[class*='language-'] {
+ color: #ffa7c4;
+ background: none;
+ text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+ }
+
+ /* Code blocks */
+ pre[class*='language-'] {
+ padding: 1em;
+ margin: 0.5em 0;
+ overflow: auto;
+ border-radius: 0.3em;
+ }
+
+ :not(pre) > code[class*='language-'],
+ pre[class*='language-'] {
+ background: #272822;
+ }
+
+ /* Inline code */
+ :not(pre) > code[class*='language-'] {
+ padding: 0.1em;
+ border-radius: 0.3em;
+ white-space: normal;
+ }
+
+ .token.comment,
+ .token.prolog,
+ .token.doctype,
+ .token.cdata {
+ color: slategray;
+ }
+
+ .token.punctuation {
+ color: #c792ea;
+ }
+
+ .namespace {
+ opacity: 0.7;
+ }
+
+ .token.property,
+ .token.tag,
+ .token.constant,
+ .token.symbol,
+ .token.deleted {
+ color: #f92672;
+ }
+
+ .token.boolean,
+ .token.number {
+ color: #ae81ff;
+ }
+
+ .token.selector,
+ .token.attr-name,
+ .token.string,
+ .token.char,
+ .token.builtin,
+ .token.inserted {
+ color: #a6e22e;
+ }
+
+ .token.operator,
+ .token.entity,
+ .token.url,
+ .language-css .token.string,
+ .style .token.string,
+ .token.variable {
+ color: skyblue;
+ }
+
+ .token.atrule,
+ .token.attr-value,
+ .token.function {
+ color: #e6db74;
+ }
+
+ .token.keyword {
+ color: #66d9ef;
+ }
+
+ .token.regex,
+ .token.important {
+ color: #fd971f;
+ }
+
+ .token.important,
+ .token.bold {
+ font-weight: bold;
+ }
+ .token.italic {
+ font-style: italic;
+ }
+
+ .token.entity {
+ cursor: help;
+ }
+
+ .prism-previewer,
+ .prism-previewer:before,
+ .prism-previewer:after {
+ position: absolute;
+ pointer-events: none;
+ }
+ .prism-previewer,
+ .prism-previewer:after {
+ left: 50%;
+ }
+ .prism-previewer {
+ margin-top: -48px;
+ width: 32px;
+ height: 32px;
+ margin-left: -16px;
+
+ opacity: 0;
+ -webkit-transition: opacity 0.25s;
+ -o-transition: opacity 0.25s;
+ transition: opacity 0.25s;
+ }
+ .prism-previewer.flipped {
+ margin-top: 0;
+ margin-bottom: -48px;
+ }
+ .prism-previewer:before,
+ .prism-previewer:after {
+ content: '';
+ position: absolute;
+ pointer-events: none;
+ }
+ .prism-previewer:before {
+ top: -5px;
+ right: -5px;
+ left: -5px;
+ bottom: -5px;
+ border-radius: 10px;
+ border: 5px solid #fff;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) inset, 0 0 10px rgba(0, 0, 0, 0.75);
+ }
+
+ .prism-previewer:after {
+ top: 100%;
+ width: 0;
+ height: 0;
+ margin: 5px 0 0 -7px;
+ border: 7px solid transparent;
+ border-color: rgba(255, 0, 0, 0);
+ border-top-color: #fff;
+ }
+ .prism-previewer.flipped:after {
+ top: auto;
+ bottom: 100%;
+ margin-top: 0;
+ margin-bottom: 5px;
+ border-top-color: rgba(255, 0, 0, 0);
+ border-bottom-color: #fff;
+ }
+ .prism-previewer.active {
+ opacity: 1;
+ }
+}
diff --git a/docs/types/index.d.ts b/docs/types/index.d.ts
index 2dc812e..21e9909 100644
--- a/docs/types/index.d.ts
+++ b/docs/types/index.d.ts
@@ -1 +1,2 @@
-declare module "*.md"
\ No newline at end of file
+declare module "*.md"
+declare module "react-prism"
\ No newline at end of file
diff --git a/package.json b/package.json
index 2366594..7ac99f6 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
"@types/react-dom": "^16.8.0",
"@types/react-router-dom": "^4.0.7",
"@types/webpack-env": "^1.13.2",
+ "at-ui-style": "^1.5.1",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^0.1.17",
@@ -114,6 +115,7 @@
"raw-loader": "^0.5.1",
"react": "^16.8.0",
"react-dom": "^16.8.0",
+ "react-prism": "^4.3.2",
"react-router-dom": "^4.2.2",
"sass-loader": "^6.0.6",
"sinon": "^4.0.1",
From d71066977ceabaf2ae52a6f1f09426e29019a8b2 Mon Sep 17 00:00:00 2001
From: Muyunyun <328375795@qq.com>
Date: Fri, 5 Apr 2019 17:13:09 +0800
Subject: [PATCH 4/8] fix: fix #14 fix #13
---
docs/about/CONTRIBUTION.md | 2 +-
docs/components/Button/index.tsx | 2 +-
docs/components/Panel/index.tsx | 4 +-
docs/index.scss | 4 +-
docs/layout/codeExample.tsx | 25 ----------
docs/layout/docs.scss | 2 +-
docs/layout/docsNav.tsx | 26 +++++-----
docs/layout/markdownEle.tsx | 86 --------------------------------
docs/layout/propsView.tsx | 57 ---------------------
package.json | 4 --
webpack/webpack.dll.config.js | 2 -
11 files changed, 21 insertions(+), 193 deletions(-)
delete mode 100644 docs/layout/codeExample.tsx
delete mode 100644 docs/layout/markdownEle.tsx
delete mode 100644 docs/layout/propsView.tsx
diff --git a/docs/about/CONTRIBUTION.md b/docs/about/CONTRIBUTION.md
index 7576dfd..8536d63 100644
--- a/docs/about/CONTRIBUTION.md
+++ b/docs/about/CONTRIBUTION.md
@@ -6,7 +6,7 @@
* 接着 clone 自己项目下的 `snake-design` 到本地;
* 然后在本地项目中执行以下 git 操作;
-```bash
+```
# 列出远程仓库 URL
$ git remote -v
# 设置一个新的远程仓库
diff --git a/docs/components/Button/index.tsx b/docs/components/Button/index.tsx
index 9e44bf5..8570d2e 100644
--- a/docs/components/Button/index.tsx
+++ b/docs/components/Button/index.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'// import MarkdownEle from '../../layout/markdownEle'
+import * as React from 'react'
import README from './README.md'
export default function () {
diff --git a/docs/components/Panel/index.tsx b/docs/components/Panel/index.tsx
index 60a0897..8570d2e 100644
--- a/docs/components/Panel/index.tsx
+++ b/docs/components/Panel/index.tsx
@@ -1,6 +1,6 @@
import * as React from 'react'
-import MarkdownEle from '../../layout/markdownEle'
+import README from './README.md'
export default function () {
- return {
- render() {
- const { title, description, code } = this.props
- const descEle = description ? {title}
- {descEle}
-
- {
const { basicCList, aboutSnakeDesignList } = this.props
return (
-
- 快速开始
- {this.renderNavList(aboutSnakeDesignList.filter(item => item.path.match(/\/guide\//)))}
-
-
- 基础组件
- {this.renderNavList(basicCList)}
-
-
- 更多信息
- {this.renderNavList(aboutSnakeDesignList.filter(item => item.path.match(/\/more\//)))}
-
+
+
+ 快速开始
+ {this.renderNavList(aboutSnakeDesignList.filter(item => item.path.match(/\/guide\//)))}
+
+
+ 基础组件
+ {this.renderNavList(basicCList)}
+
+
+ 更多信息
+ {this.renderNavList(aboutSnakeDesignList.filter(item => item.path.match(/\/more\//)))}
+
+
)
}
diff --git a/docs/layout/markdownEle.tsx b/docs/layout/markdownEle.tsx
deleted file mode 100644
index 73a850b..0000000
--- a/docs/layout/markdownEle.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react'
-import * as marked from 'marked'
-import * as classNames from 'classnames'
-import * as prism from 'prismjs'
-
-import 'prismjs/components/prism-markup'
-import 'prismjs/components/prism-javascript'
-import 'prismjs/components/prism-css'
-import 'prismjs/components/prism-diff'
-import 'prismjs/components/prism-jsx'
-
-import '../static/github-markdown.scss'
-import 'prismjs/themes/prism-okaidia.css'
-
-const renderer = new marked.Renderer()
-
-// 自定义markdown标签 :::demo:::
-renderer.paragraph = function (text: string) {
- return text.replace(':::demo', '')
- .replace(':::', '')
-}
-
-renderer.code = function(code: string, lang: string) {
- let language = null
- let tmpLang = lang
- let trueCode = code
- switch (lang) {
- // 自定义```require```匹配规则
- case 'require':
- // 动态获取指定文件
- // require.context参数说明
- // 其中第一个参数表示相对的文件目录，
- // 第二个参数表示是否包括子目录中的文件，
- // 第三个参数表示引入的文件匹配的正则表达式
- const context = require.context('!raw-loader!..', true, /\.tsx?$/)
- trueCode = context(code)
- tmpLang = 'jsx'
- language = prism.languages.jsx
- break
- case 'diff':
- language = prism.languages.diff
- break
- case 'css':
- language = prism.languages.css
- break
- case 'js':
- case 'jsx':
- default:
- language = prism.languages.jsx
- break
- }
- return '' +
- `` +
- `` +
- prism.highlight(trueCode, language, 'JavaScript') +
- '' +
- '
' +
- ''
-}
-
-marked.setOptions({
- gfm: true,
- tables: true,
- breaks: false,
- pedantic: false,
- sanitize: false,
- smartLists: true,
- smartypants: false,
- langPrefix: 'language-',
- renderer,
-})
-
-interface MarkDownProps {
- text: string,
- styles?: string
-}
-
-export default class MarkdownEle extends React.Component {
- render() {
- const { text, styles } = this.props
- const htmlContent = marked(text)
- return (
-
- )
- }
-}
diff --git a/docs/layout/propsView.tsx b/docs/layout/propsView.tsx
deleted file mode 100644
index be44725..0000000
--- a/docs/layout/propsView.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react'
-
-interface PropsAttribute {
- attribute: string,
- description: string,
- type: string,
- acceptedValue?: string,
- default?: string
- [key: string]: string
-}
-
-interface PropsTableconstant {
- title: string,
- props: Array
- [propName: string]: any
-}
-
-interface PropsTableProps {
- constants: Array | PropsTableconstant
-}
-
-const tr = (item: PropsAttribute) =>
- Object.keys(item).map((it, index) =>
- {item[it]}
-)
-
-export default class PropsTable extends React.Component {
-
- // 渲染一个组件的props
- renderOneProps(constants: PropsTableconstant, i: number) {
- const { title, props } = constants
- const tbody = props.map((item, index) => {
- return ({tr(item)} )
- })
- return
- {title}
-
-
-
- 属性
- 描述
- 类型
- 枚举值
- 默认值
-
-
- {tbody}
-
-
- }
-
- render() {
- const { constants } = this.props
- const constantsArray = Array.isArray(constants) ? constants : [constants]
- return constantsArray.map((con, i) => this.renderOneProps(con, i))
- }
-}
diff --git a/package.json b/package.json
index 7ac99f6..8d29319 100644
--- a/package.json
+++ b/package.json
@@ -66,8 +66,6 @@
"@types/enzyme-adapter-react-16": "^1.0.1",
"@types/enzyme-to-json": "^1.5.0",
"@types/jest": "^20.0.8",
- "@types/marked": "^0.3.0",
- "@types/prismjs": "^1.9.0",
"@types/react": "^16.8.0",
"@types/react-dom": "^16.8.0",
"@types/react-router-dom": "^4.0.7",
@@ -105,13 +103,11 @@
"loader-utils": "^1.2.3",
"markdown-it": "^8.4.2",
"markdown-it-container": "^2.0.0",
- "marked": "^0.3.6",
"node-sass": "^4.5.3",
"open-browser-webpack-plugin": "^0.0.5",
"postcss-cssnext": "^3.0.2",
"postcss-loader": "^2.0.6",
"prettier": "^1.16.4",
- "prismjs": "^1.9.0",
"raw-loader": "^0.5.1",
"react": "^16.8.0",
"react-dom": "^16.8.0",
diff --git a/webpack/webpack.dll.config.js b/webpack/webpack.dll.config.js
index f2162a4..03dc75e 100644
--- a/webpack/webpack.dll.config.js
+++ b/webpack/webpack.dll.config.js
@@ -58,8 +58,6 @@ module.exports = {
'react',
'react-dom',
'react-router-dom',
- 'marked',
- 'prismjs'
]
},
output: {
From 68cdc1a04d7adb64901075ccc06f8521bfcceb44 Mon Sep 17 00:00:00 2001
From: Muyunyun <328375795@qq.com>
Date: Wed, 24 Apr 2019 12:57:21 +0800
Subject: [PATCH 5/8] feat: build
---
package.json | 7 +-
site/bisheng.config.js | 161 ++++++++++++++++++++++++++++++++++++
webpack/webpack.dev.conf.js | 48 +++++------
3 files changed, 191 insertions(+), 25 deletions(-)
create mode 100644 site/bisheng.config.js
diff --git a/package.json b/package.json
index 9f701f2..675568a 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
"license": "MIT",
"main": "dist/snake-design.js",
"scripts": {
- "start": "yarn build-dll && webpack-dev-server --config webpack/webpack.dev.conf.js --colors",
+ "start": "bisheng start -c ./site/bisheng.config.js",
+ "start1": "yarn build-dll && webpack-dev-server --config webpack/webpack.dev.conf.js --colors",
"build": "tsc -p tsconfig.json && webpack --config webpack/webpack.prod.conf.js",
"build-docs": "webpack --config webpack/docs.config.js",
"build-dll": "webpack --config ./webpack/webpack.dll.config.js",
@@ -33,7 +34,7 @@
"test:debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand --watch",
"test-update": "jest --updateSnapshot",
"style-fix": "stylelint \"components/**/*.scss\" --syntax scss --fix",
- "publish-doc": "node ./scripts/publishdoc.js"
+ "publish-doc": "yarn build-docs && node ./scripts/publishdoc.js"
},
"husky": {
"hooks": {
@@ -56,6 +57,7 @@
"dependencies": {
"classnames": "^2.2.5",
"normalize.css": "^7.0.0",
+ "pipixia": "^0.0.10",
"react-spring": "^8.0.18",
"warning": "^4.0.3"
},
@@ -81,6 +83,7 @@
"concurrently": "^3.4.0",
"copy-to-clipboard": "^3.0.8",
"css-loader": "^0.28.7",
+ "css-split-webpack-plugin": "^0.2.6",
"ejs": "^2.5.7",
"enzyme": "^3.2.0",
"enzyme-adapter-react-16": "^1.1.0",
diff --git a/site/bisheng.config.js b/site/bisheng.config.js
new file mode 100644
index 0000000..28c1341
--- /dev/null
+++ b/site/bisheng.config.js
@@ -0,0 +1,161 @@
+const path = require('path')
+const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default
+// const replaceLib = require('antd-tools/lib/replaceLib')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+const isDev = process.env.NODE_ENV === 'development'
+const usePreact = process.env.REACT_ENV === 'preact'
+
+function alertBabelConfig(rules) {
+ rules.forEach(rule => {
+ if (rule.loader && rule.loader === 'babel-loader') {
+ // if (rule.options.plugins.indexOf(replaceLib) === -1) {
+ // rule.options.plugins.push(replaceLib)
+ // }
+ // eslint-disable-next-line
+ rule.options.plugins = rule.options.plugins.filter(
+ plugin => !plugin.indexOf || plugin.indexOf('babel-plugin-add-module-exports') === -1
+ )
+ // Add babel-plugin-add-react-displayname
+ rule.options.plugins.push(require.resolve('babel-plugin-add-react-displayname'))
+ } else if (rule.use) {
+ alertBabelConfig(rule.use)
+ }
+ })
+}
+
+module.exports = {
+ port: 8001,
+ hash: true,
+ output: path.resolve(__dirname, '../build'),
+ // source: {
+ // components: './components',
+ // docs: './docs',
+ // changelog: ['CHANGELOG.zh-CN.md', 'CHANGELOG.en-US.md'],
+ // },
+ // theme: './site/theme',
+ // htmlTemplate: './site/theme/static/template.html',
+ // themeConfig: {
+ // categoryOrder: {
+ // 'Ant Design': 0,
+ // 原则: 1,
+ // Principles: 1,
+ // 视觉: 2,
+ // Visual: 2,
+ // 模式: 3,
+ // Patterns: 3,
+ // 其他: 6,
+ // Other: 6,
+ // Components: 100,
+ // },
+ // typeOrder: {
+ // General: 0,
+ // Layout: 1,
+ // Navigation: 2,
+ // 'Data Entry': 3,
+ // 'Data Display': 4,
+ // Feedback: 5,
+ // Other: 6,
+ // 通用: 0,
+ // 布局: 1,
+ // 导航: 2,
+ // 数据录入: 3,
+ // 数据展示: 4,
+ // 反馈: 5,
+ // 其他: 6,
+ // },
+ // docVersions: {
+ // '0.9.x': 'http://09x.ant.design',
+ // '0.10.x': 'http://010x.ant.design',
+ // '0.11.x': 'http://011x.ant.design',
+ // '0.12.x': 'http://012x.ant.design',
+ // '1.x': 'http://1x.ant.design',
+ // '2.x': 'http://2x.ant.design',
+ // },
+ // },
+ filePathMapper(filePath) {
+ // if (filePath === '/index.html') {
+ // return ['/index.html', '/index-cn.html']
+ // }
+ // if (filePath.endsWith('/index.html')) {
+ // return [filePath, filePath.replace(/\/index\.html$/, '-cn/index.html')]
+ // }
+ // if (filePath !== '/404.html' && filePath !== '/index-cn.html') {
+ // return [filePath, filePath.replace(/\.html$/, '-cn.html')]
+ // }
+ return filePath
+ },
+ doraConfig: {
+ verbose: true
+ },
+ // lessConfig: {
+ // javascriptEnabled: true
+ // },
+ webpackConfig(config) {
+ config.entry = {
+ main: ['./docs/app.tsx']
+ }
+ config.output = {
+ path: path.resolve(__dirname, '../build'),
+ filename: '[name].js',
+ publicPath: '/'
+ }
+ // eslint-disable-next-line
+ config.resolve.alias = {
+ // 'antd/lib': path.join(process.cwd(), 'components'),
+ // 'antd/es': path.join(process.cwd(), 'components'),
+ // antd: path.join(process.cwd(), 'index'),
+ // site: path.join(process.cwd(), 'site'),
+ // 'react-router': 'react-router/umd/ReactRouter'
+ components: path.join(process.cwd(), 'components'),
+ types: path.join(process.cwd(), 'types'),
+ layout: path.join(process.cwd(), 'docs/layout'),
+ routes: path.join(process.cwd(), 'docs/routes'),
+ static: path.join(process.cwd(), 'docs/static')
+ }
+
+ // eslint-disable-next-line
+ config.externals = {
+ 'react-router-dom': 'ReactRouterDOM'
+ }
+
+ if (usePreact) {
+ // eslint-disable-next-line
+ config.resolve.alias = Object.assign({}, config.resolve.alias, {
+ react: 'preact-compat',
+ 'react-dom': 'preact-compat',
+ 'create-react-class': 'preact-compat/lib/create-react-class',
+ 'react-router': 'react-router'
+ })
+ }
+
+ if (isDev) {
+ // eslint-disable-next-line
+ config.devtool = 'source-map';
+ }
+
+ alertBabelConfig(config.module.rules)
+
+ config.plugins.push(
+ new HtmlWebpackPlugin({
+ filename: 'index.html',
+ template: path.resolve(__dirname, '../docs/index.html'),
+ inject: true,
+ chunks: ['vendor', 'main']
+ })
+ )
+ config.plugins.push(new CSSSplitWebpackPlugin({ size: 4000 }))
+
+ return config
+ },
+
+ devServerConfig: {
+ public: process.env.DEV_HOST || 'localhost',
+ disableHostCheck: !!process.env.DEV_HOST
+ },
+
+ htmlTemplateExtraData: {
+ isDev,
+ usePreact
+ }
+}
diff --git a/webpack/webpack.dev.conf.js b/webpack/webpack.dev.conf.js
index fc30b14..995849a 100644
--- a/webpack/webpack.dev.conf.js
+++ b/webpack/webpack.dev.conf.js
@@ -1,4 +1,4 @@
-const path = require("path")
+const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
@@ -6,10 +6,10 @@ const OpenBrowserPlugin = require('open-browser-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const config = require('../config')
-const publicPath = "/"
+const publicPath = '/'
function resolve() {
- return path.resolve(__dirname,'..')
+ return path.resolve(__dirname, '..')
}
module.exports = {
@@ -17,19 +17,17 @@ module.exports = {
devtool: 'inline-source-map',
context: path.resolve(__dirname, '..'),
entry: {
- 'main': [
- "./docs/app.tsx",
- ],
+ main: ['./docs/app.tsx']
},
output: {
- path: path.resolve(__dirname, "../build"),
- filename: "[name].js",
- publicPath: publicPath,
+ path: path.resolve(__dirname, '../build'),
+ filename: '[name].js',
+ publicPath: publicPath
},
resolve: {
- extensions: [".ts", ".tsx", ".js"],
+ extensions: ['.ts', '.tsx', '.js'],
alias: {
- components: resolve() + '/components',
+ components: resolve() + '/components',
types: resolve() + '/types',
layout: resolve() + '/docs/layout',
routes: resolve() + '/docs/routes',
@@ -56,18 +54,22 @@ module.exports = {
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
- { test: /\.scss$/,
+ {
+ test: /\.scss$/,
use: ['style-loader', 'css-loader?importLoaders=2', 'postcss-loader', 'sass-loader']
},
- { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
+ {
+ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+ loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
+ },
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=10240' }
]
},
plugins: [
- new webpack.DllReferencePlugin({
- context: __dirname,
- manifest: require('../build/vendor/vendor-manifest.json')
- }),
+ // new webpack.DllReferencePlugin({
+ // context: __dirname,
+ // manifest: require('../build/vendor/vendor-manifest.json')
+ // }),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
@@ -75,12 +77,12 @@ module.exports = {
filename: 'index.html',
template: path.resolve(__dirname, '../docs/index.html'),
inject: true,
- chunks: ['vendor', 'main'],
+ chunks: ['vendor', 'main']
}),
new FriendlyErrorsPlugin(),
new OpenBrowserPlugin({
- url: `http://${config.host}:${config.port}`,
- }),
+ url: `http://${config.host}:${config.port}`
+ })
],
devServer: {
host: config.host,
@@ -92,7 +94,7 @@ module.exports = {
lazy: false,
publicPath,
headers: { 'Access-Control-Allow-Origin': '*' },
- stats: { color: true, assets: true, assetsSort: "field", chunks: false },
+ stats: { color: true, assets: true, assetsSort: 'field', chunks: false },
historyApiFallback: true
},
// 将一些在浏览器不起作用，但是引用到的库置空
@@ -100,6 +102,6 @@ module.exports = {
dgram: 'empty',
fs: 'empty',
net: 'empty',
- tls: 'empty',
+ tls: 'empty'
}
-};
+}
From 2b32d6d5bef3bb5ff7e051709f610a26002183e8 Mon Sep 17 00:00:00 2001
From: Muyunyun <328375795@qq.com>
Date: Thu, 25 Apr 2019 08:39:50 +0800
Subject: [PATCH 6/8] chore: start with bisheng
---
.gitignore | 1 -
.vscode/launch.json | 38 ++++++++++++
docs/index.html | 29 ++++-----
package.json | 5 +-
site/bisheng.config.js | 6 +-
webpack/webpack.dev.conf.js | 107 ----------------------------------
webpack/webpack.dll.config.js | 69 ----------------------
7 files changed, 58 insertions(+), 197 deletions(-)
create mode 100644 .vscode/launch.json
delete mode 100644 webpack/webpack.dev.conf.js
delete mode 100644 webpack/webpack.dll.config.js
diff --git a/.gitignore b/.gitignore
index ae1b006..b7bb29f 100755
--- a/.gitignore
+++ b/.gitignore
@@ -54,7 +54,6 @@ jest_0
# editor
.idea/
-.vscode
# eslint
.DS_Store
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..1920e90
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,38 @@
+{
+ // 使用 IntelliSense 了解相关属性。
+ // 悬停以查看现有属性的描述。
+ // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "node",
+ "request": "launch",
+ "name": "Jest All",
+ "program": "${workspaceFolder}/node_modules/.bin/jest",
+ "args": [
+ "--runInBand"
+ ],
+ "console": "integratedTerminal",
+ "internalConsoleOptions": "neverOpen",
+ "disableOptimisticBPs": true,
+ "windows": {
+ "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+ }
+ },
+ {
+ "type": "node",
+ "request": "launch",
+ "name": "Jest Current File",
+ "program": "${workspaceFolder}/node_modules/.bin/jest",
+ "args": [
+ "${relativeFile}"
+ ],
+ "console": "integratedTerminal",
+ "internalConsoleOptions": "neverOpen",
+ "disableOptimisticBPs": true,
+ "windows": {
+ "program": "${workspaceFolder}/node_modules/jest/bin/jest",
+ }
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 1e6b43c..4bf4dd4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,16 +1,17 @@
-
-
- 组件库 based hooks
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ snake design
+
+
+
+
+
+
+
+
+
+