@douyinfe/semi-foundation 2.56.3 → 2.56.4-alpha.2

package/lib/cjs/markdownRender/constants.d.ts

@@ -0,0 +1,5 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {};
+export { cssClasses, strings };

package/lib/cjs/markdownRender/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.cssClasses = void 0;
+var _constants = require("../base/constants");
+const cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-markdownRender`
+};
+exports.cssClasses = cssClasses;
+const strings = {};
+exports.strings = strings;

package/lib/cjs/markdownRender/foundation.d.ts

@@ -0,0 +1,19 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { MDXProps } from 'mdx/types';
+export interface MarkdownRenderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getRuntime: () => any;
+}
+export interface MarkdownRenderBaseProps {
+    mdxRaw: string;
+    components: MDXProps['components'];
+}
+export interface MarkdownRenderBaseState {
+    MDXContentComponent: any;
+}
+declare class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
+    private getOptions;
+    compile: (mdxRaw: string) => Promise<import("vfile").VFile>;
+    evaluate: (mdxRaw: string) => Promise<import("mdx/types").MDXContent>;
+    evaluateSync: (mdxRaw: string) => import("mdx/types").MDXContent;
+}
+export default MarkdownRenderFoundation;

package/lib/cjs/markdownRender/foundation.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+var _mdx = require("@mdx-js/mdx");
+var _remarkGfm = _interopRequireDefault(require("remark-gfm"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+class MarkdownRenderFoundation extends _foundation.default {
+  constructor() {
+    super(...arguments);
+    this.getOptions = () => {
+      return {
+        evaluateOptions: {
+          remarkPlugins: [_remarkGfm.default]
+        },
+        compileOptions: {},
+        runOptions: {}
+      };
+    };
+    this.compile = mdxRaw => __awaiter(this, void 0, void 0, function* () {
+      return yield (0, _mdx.compile)(mdxRaw, this.getOptions().compileOptions);
+    });
+    this.evaluate = mdxRaw => __awaiter(this, void 0, void 0, function* () {
+      return (yield (0, _mdx.evaluate)(mdxRaw, Object.assign(Object.assign(Object.assign({}, this.getOptions().runOptions), this.getOptions().evaluateOptions), this._adapter.getRuntime()))).default;
+    });
+    this.evaluateSync = mdxRaw => {
+      return (0, _mdx.evaluateSync)(mdxRaw, Object.assign(Object.assign(Object.assign({}, this.getOptions().runOptions), this.getOptions().evaluateOptions), this._adapter.getRuntime())).default;
+    };
+  }
+}
+var _default = MarkdownRenderFoundation;
+exports.default = _default;

package/lib/cjs/markdownRender/markdownRender.css

@@ -0,0 +1,26 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-markdownRender ul, .semi-markdownRender li {
+  color: var(--semi-color-text-0);
+}
+.semi-markdownRender-component-image {
+  margin: 16px 16px 16px 16px;
+  max-width: 50%;
+  max-height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.semi-markdownRender-component-image-alt {
+  margin-top: 8px;
+  text-align: center;
+  color: var(--semi-color-tertiary);
+}
+.semi-markdownRender .semi-markdownRender-component-header {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.semi-markdownRender-component-p strong {
+  font-weight: 600;
+}

package/lib/cjs/markdownRender/markdownRender.scss

@@ -0,0 +1,41 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-markdownRender;
+
+.#{$module} {
+
+    ul,li {
+        color:$color-markdownRender_component_list
+    }
+
+    &-component-image{
+        margin: $spacing-markdownRender_component_image-marginTop $spacing-markdownRender_component_image-marginRight $spacing-markdownRender_component_image-marginBottom $spacing-markdownRender_component_image-marginLeft;
+        max-width: $width-markdownRender_component_image-maxWidth;
+        max-height: $width-markdownRender_component_image-maxHeight;
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &-alt{
+            margin-top: $spacing-markdownRender_component_image_alt-marginTop;
+            text-align: center;
+            color:$color-markdownRender_component_image_alt;
+        }
+    }
+
+    & &-component-header{
+        margin-top: $spacing-markdownRender_component_header-marginTop;
+        margin-bottom: $spacing-markdownRender_component_header-marginBottom;
+    }
+
+    &-component-p{
+        strong{
+            font-weight: $font-weight-bold;
+        }
+    }
+
+
+
+
+
+}

package/lib/cjs/markdownRender/variables.scss

@@ -0,0 +1,15 @@
+$spacing-markdownRender_component_image-marginLeft:16px;
+$spacing-markdownRender_component_image-marginRight:16px;
+$spacing-markdownRender_component_image-marginTop:16px;
+$spacing-markdownRender_component_image-marginBottom:16px;
+$width-markdownRender_component_image-maxWidth: 50%;
+$width-markdownRender_component_image-maxHeight: 500px;
+$spacing-markdownRender_component_image_alt-marginTop: 8px;
+
+
+$spacing-markdownRender_component_header-marginTop: 16px;
+$spacing-markdownRender_component_header-marginBottom: 16px;
+
+
+$color-markdownRender_component_list: var(--semi-color-text-0);
+$color-markdownRender_component_image_alt:var(--semi-color-tertiary);

package/lib/es/markdownRender/constants.d.ts

@@ -0,0 +1,5 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {};
+export { cssClasses, strings };

package/lib/es/markdownRender/constants.js

@@ -0,0 +1,6 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-markdownRender`
+};
+const strings = {};
+export { cssClasses, strings };

package/lib/es/markdownRender/foundation.d.ts

@@ -0,0 +1,19 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { MDXProps } from 'mdx/types';
+export interface MarkdownRenderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getRuntime: () => any;
+}
+export interface MarkdownRenderBaseProps {
+    mdxRaw: string;
+    components: MDXProps['components'];
+}
+export interface MarkdownRenderBaseState {
+    MDXContentComponent: any;
+}
+declare class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
+    private getOptions;
+    compile: (mdxRaw: string) => Promise<import("vfile").VFile>;
+    evaluate: (mdxRaw: string) => Promise<import("mdx/types").MDXContent>;
+    evaluateSync: (mdxRaw: string) => import("mdx/types").MDXContent;
+}
+export default MarkdownRenderFoundation;

package/lib/es/markdownRender/foundation.js

@@ -0,0 +1,54 @@
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+import BaseFoundation from '../base/foundation';
+import { evaluate, compile, evaluateSync } from '@mdx-js/mdx';
+import remarkGfm from 'remark-gfm';
+class MarkdownRenderFoundation extends BaseFoundation {
+  constructor() {
+    super(...arguments);
+    this.getOptions = () => {
+      return {
+        evaluateOptions: {
+          remarkPlugins: [remarkGfm]
+        },
+        compileOptions: {},
+        runOptions: {}
+      };
+    };
+    this.compile = mdxRaw => __awaiter(this, void 0, void 0, function* () {
+      return yield compile(mdxRaw, this.getOptions().compileOptions);
+    });
+    this.evaluate = mdxRaw => __awaiter(this, void 0, void 0, function* () {
+      return (yield evaluate(mdxRaw, Object.assign(Object.assign(Object.assign({}, this.getOptions().runOptions), this.getOptions().evaluateOptions), this._adapter.getRuntime()))).default;
+    });
+    this.evaluateSync = mdxRaw => {
+      return evaluateSync(mdxRaw, Object.assign(Object.assign(Object.assign({}, this.getOptions().runOptions), this.getOptions().evaluateOptions), this._adapter.getRuntime())).default;
+    };
+  }
+}
+export default MarkdownRenderFoundation;

package/lib/es/markdownRender/markdownRender.css

@@ -0,0 +1,26 @@
+/* shadow */
+/* sizing */
+/* spacing */
+.semi-markdownRender ul, .semi-markdownRender li {
+  color: var(--semi-color-text-0);
+}
+.semi-markdownRender-component-image {
+  margin: 16px 16px 16px 16px;
+  max-width: 50%;
+  max-height: 500px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.semi-markdownRender-component-image-alt {
+  margin-top: 8px;
+  text-align: center;
+  color: var(--semi-color-tertiary);
+}
+.semi-markdownRender .semi-markdownRender-component-header {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.semi-markdownRender-component-p strong {
+  font-weight: 600;
+}

package/lib/es/markdownRender/markdownRender.scss

@@ -0,0 +1,41 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-markdownRender;
+
+.#{$module} {
+
+    ul,li {
+        color:$color-markdownRender_component_list
+    }
+
+    &-component-image{
+        margin: $spacing-markdownRender_component_image-marginTop $spacing-markdownRender_component_image-marginRight $spacing-markdownRender_component_image-marginBottom $spacing-markdownRender_component_image-marginLeft;
+        max-width: $width-markdownRender_component_image-maxWidth;
+        max-height: $width-markdownRender_component_image-maxHeight;
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &-alt{
+            margin-top: $spacing-markdownRender_component_image_alt-marginTop;
+            text-align: center;
+            color:$color-markdownRender_component_image_alt;
+        }
+    }
+
+    & &-component-header{
+        margin-top: $spacing-markdownRender_component_header-marginTop;
+        margin-bottom: $spacing-markdownRender_component_header-marginBottom;
+    }
+
+    &-component-p{
+        strong{
+            font-weight: $font-weight-bold;
+        }
+    }
+
+
+
+
+
+}

package/lib/es/markdownRender/variables.scss

@@ -0,0 +1,15 @@
+$spacing-markdownRender_component_image-marginLeft:16px;
+$spacing-markdownRender_component_image-marginRight:16px;
+$spacing-markdownRender_component_image-marginTop:16px;
+$spacing-markdownRender_component_image-marginBottom:16px;
+$width-markdownRender_component_image-maxWidth: 50%;
+$width-markdownRender_component_image-maxHeight: 500px;
+$spacing-markdownRender_component_image_alt-marginTop: 8px;
+
+
+$spacing-markdownRender_component_header-marginTop: 16px;
+$spacing-markdownRender_component_header-marginBottom: 16px;
+
+
+$color-markdownRender_component_list: var(--semi-color-text-0);
+$color-markdownRender_component_image_alt:var(--semi-color-tertiary);

package/markdownRender/constants.ts

@@ -0,0 +1,11 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-markdownRender`,
+};
+
+const strings = {
+
+};
+
+export { cssClasses, strings };

package/markdownRender/foundation.ts

@@ -0,0 +1,67 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { CompileOptions, evaluate, compile, EvaluateOptions, evaluateSync, RunOptions } from '@mdx-js/mdx';
+import { MDXProps } from 'mdx/types';
+import remarkGfm from 'remark-gfm';
+export interface MarkdownRenderAdapter <P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getRuntime: () => any
+
+}
+
+
+
+
+export interface MarkdownRenderBaseProps{
+    mdxRaw: string;
+    components: MDXProps['components']
+}
+
+
+export interface MarkdownRenderBaseState{
+    MDXContentComponent: any
+}
+
+class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
+
+    private getOptions = ()=>{
+        return {
+            evaluateOptions: {
+                remarkPlugins: [remarkGfm]
+            },
+            compileOptions: {
+
+            },
+            runOptions: {
+            }
+        } as {
+            evaluateOptions: EvaluateOptions;
+            compileOptions: CompileOptions;
+            runOptions: RunOptions
+        };
+    }
+
+    compile = async (mdxRaw: string)=>{
+        return await compile(mdxRaw, this.getOptions().compileOptions);
+    }
+
+    evaluate = async (mdxRaw: string)=>{
+        return (await evaluate(mdxRaw, {
+            ...this.getOptions().runOptions,
+            ...this.getOptions().evaluateOptions,
+            ...this._adapter.getRuntime()
+        })).default;
+    }
+
+    evaluateSync = (mdxRaw: string)=>{
+        return ( evaluateSync(mdxRaw, {
+            ...this.getOptions().runOptions,
+            ...this.getOptions().evaluateOptions,
+            ...this._adapter.getRuntime()
+        })).default;
+    }
+
+
+
+}
+
+export default MarkdownRenderFoundation;
+

package/markdownRender/markdownRender.scss

@@ -0,0 +1,41 @@
+@import "./variables.scss";
+
+$module: #{$prefix}-markdownRender;
+
+.#{$module} {
+
+    ul,li {
+        color:$color-markdownRender_component_list
+    }
+
+    &-component-image{
+        margin: $spacing-markdownRender_component_image-marginTop $spacing-markdownRender_component_image-marginRight $spacing-markdownRender_component_image-marginBottom $spacing-markdownRender_component_image-marginLeft;
+        max-width: $width-markdownRender_component_image-maxWidth;
+        max-height: $width-markdownRender_component_image-maxHeight;
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &-alt{
+            margin-top: $spacing-markdownRender_component_image_alt-marginTop;
+            text-align: center;
+            color:$color-markdownRender_component_image_alt;
+        }
+    }
+
+    & &-component-header{
+        margin-top: $spacing-markdownRender_component_header-marginTop;
+        margin-bottom: $spacing-markdownRender_component_header-marginBottom;
+    }
+
+    &-component-p{
+        strong{
+            font-weight: $font-weight-bold;
+        }
+    }
+
+
+
+
+
+}

package/markdownRender/variables.scss

@@ -0,0 +1,15 @@
+$spacing-markdownRender_component_image-marginLeft:16px;
+$spacing-markdownRender_component_image-marginRight:16px;
+$spacing-markdownRender_component_image-marginTop:16px;
+$spacing-markdownRender_component_image-marginBottom:16px;
+$width-markdownRender_component_image-maxWidth: 50%;
+$width-markdownRender_component_image-maxHeight: 500px;
+$spacing-markdownRender_component_image_alt-marginTop: 8px;
+
+
+$spacing-markdownRender_component_header-marginTop: 16px;
+$spacing-markdownRender_component_header-marginBottom: 16px;
+
+
+$color-markdownRender_component_list: var(--semi-color-text-0);
+$color-markdownRender_component_image_alt:var(--semi-color-tertiary);

package/package.json

@@ -1,13 +1,14 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.56.3",
+    "version": "2.56.4-alpha.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.56.3",
+        "@douyinfe/semi-animation": "2.56.4-alpha.2",
+        "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.29.3",
@@ -15,6 +16,7 @@
         "fast-copy": "^3.0.1 ",
         "lodash": "^4.17.21",
         "memoize-one": "^5.2.1",
+        "remark-gfm": "^4.0.0",
         "scroll-into-view-if-needed": "^2.2.24"
     },
     "keywords": [],
@@ -24,11 +26,12 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "933e2bf0c8d66a690b83d0410656ba4cdf265537",
+    "gitHead": "da5eaf67cac576a79ab6e556874d05b6c061c94a",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@types/lodash": "^4.14.176",
+        "@types/mdx": "^2.0.13",
         "babel-plugin-lodash": "^3.3.4",
         "del": "^6.0.0",
         "gulp": "^4.0.2",