refactor: provider `useDemoData` which is given by `getDemoById` #1876

zombieJ · 2023-09-08T02:19:03Z

🤔 这个变动的性质是？/ What is the nature of this change?

🔗 相关 Issue / Related Issue

💡 需求背景和解决方案 / Background or solution

📝 更新日志 / Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

vercel · 2023-09-08T02:19:07Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dumi	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 11, 2023 6:51am

zombieJ · 2023-09-08T07:53:16Z

src/client/theme-api/DumiDemo/DemoErrorBoundary.tsx

@@ -0,0 +1,27 @@
+import Container from 'dumi/theme/builtins/Container';


将 src/client/theme-api/DumiDemo.tsx 拆成了 2 份文件。

zombieJ · 2023-09-08T07:53:30Z

src/client/theme-api/DumiDemo/index.tsx

@@ -0,0 +1,70 @@
+import { SP_ROUTE_PREFIX } from '@/constants';


将 src/client/theme-api/DumiDemo.tsx 拆成了 2 份文件

zombieJ · 2023-09-08T07:53:52Z

src/client/pages/Demo/index.ts

-  const { demos } = useSiteData();
-  const { component } = demos[id!] || {};
+
+  const demoData = useDemoData(id!);


替换成了单独加载的 useDemoData hook

src/client/theme-api/DumiDemo/index.tsx

zombieJ · 2023-09-08T07:54:38Z

src/client/theme-api/context/index.ts

+  // =================== Demo Map ===================
+  // Demo map is root providing the id => route mapping info.
+  // Which is generated by `meta-demos` template
+  getDemoById: (id: string) => Promise<DemoInfo | null>;


提供新的 getDemoById 方法从独立的 chunk 里加载数据

zombieJ · 2023-09-08T07:55:14Z

src/client/theme-api/context/use.ts

@@ -0,0 +1,30 @@
+// Copy from React official demo.


从 react.dev 中，抄的 use hook

zombieJ · 2023-09-08T07:57:41Z

src/features/meta.ts

@@ -65,6 +65,18 @@ export default (api: IApi) => {
      },
    });

+    // generate meta lazy entry
+    api.writeTmpFile({


新的 meta/demo 入口，使用 demo-index chunk 异步加载数据

src/client/pages/Demo/index.ts

PeachScript · 2023-09-08T08:45:09Z

src/client/theme-api/context/index.ts

+const cache = new Map<string, Promise<DemoInfo | null>>();
+
+// Async load demo data
+export function useDemoData(demoId: string) {


有 hook 的话要么 getDemoById 就作为内部方法不通过 dumi 和 context 暴露了？

getDemoById 必须要通过 context 传递才能供 hooks 消费。不暴露的话指的是额外搞个 context 传这个？

我的想法是 useDemoData 和 getDemoById 的实现都写在这里：

dumi/src/features/meta.ts

Line 52 in fc4be89

path: 'dumi/meta/index.ts',

然后在这里相对路径 re-export useDemoData 实现导出：

dumi/src/features/exports.ts

Line 19 in 417540d

content: `export * from '../exports';

get 了，那我建议这个晚点搞。
React 的 Suspense 异步数据现在 React 还没有提供一个很好的封装。往上挪的话，template 里会有大量的混合代码。这其实没有特别大的必要。而且我们本身也没有在 exports 里透露出来，只是通过 context 传递而已。

PeachScript · 2023-09-08T08:45:24Z

src/client/theme-api/context/index.ts

 });

 export const useSiteData = () => {
  return useContext(SiteContext);
 };
+
+const cache = new Map<string, Promise<DemoInfo | null>>();


cache 是不是做在 getDemoById 里更合适

这个是 React 的 Suspense data 一套的，放 getDemoById 里就和 React 实现耦合了。

PeachScript · 2023-09-11T03:30:52Z

src/client/theme-api/context/index.ts

+    cache.set(demoId, getDemoById(demoId));
+  }
+
+  return use(cache.get(demoId)!);


这个 use 的作用是什么呢

见上，React Suspense 的实现。官方现在没有提供封装，所以直接抄的文档代码

* refactor: extract inline plugin templates as independent files (#1874) * refactor: mv to tmpl * refactor: more info * refactor: to template * docs: add customize page * refactor: to contant * chore: revert config * chore: rm tmpl * chore: dir path * chore: clean up * feat: split markdown meta loader (#1875) * feat: split mdLoader type * feat: split mdLoader * chore: code optimize * fix: use winPath * chore: update getter * refactor: extract runtime tpl (#1883) * refactor: load text data from self in markdown loader (#1881) * refactor: provider `useDemoData` which is given by `getDemoById` (#1876) * chore: all pass to lazy * chore: match route * chore: meta demos * chore: support getDemoById * chore: split code * chore: back of it * chore: getDemoById * chore: support demo sus * chore: all demos * chore: demo extract * chore: clean up * chore: clean up * chore: rm fallback * refactor: remove full demos from context (#1885) * chore: rm demos * chore: update lock file * chore: rm texts (#1886) * refactor: useRouteMeta & useTabMeta with getRouteMetaById (#1888) * refactor: useRouteMeta & useTabMeta * fix: route meta * refactor: fix sidebar * chore: code clean * refactor: useRouteMeta fully use getRouteMetaById (#1889) * fix: useRouteMeta fully use getRouteMetaById * refactor: runtime get frontmatter directly * refactor: use sync frontmatter * refactor: better frontmatter code (#1892) * refactor: better frontmatter code * fix: render loop * refactor: clean up meta (#1894) * refactor: clean up meta * chore: clean up * feat: Make searchable again (#1898) * chore: search data * chore: fill content * chore: fix loading * chore: support loading state * feat: merge chunk & optimize meta loading (#1906) * feat: use new loader for search * feat: search support tsx * feat: split meta chunk * feat: load meta on hover * chore: code clena * perf: loadSearchData on focus & show loading only once (#1915) * fix: demo should export html file (#1931) * fix: demo should export html file * chore: code clean * feat: support live demo (#1905) * feat: support live code * feat: split live plugin * feat: enabled by live config * feat: add error catcher * docs: add docs * docs: add docs * feat: update single file logic * docs: rm docs * feat: put Live Components into theme-default slots * feat: update regexp & fix enable logic * feat: make LiveEditor derivate Editor * feat: enhance live regexp (#1946) * refactor: optimize async route meta solution (#1974) * refactor: optimize async route meta solution * refactor: simplify markdown loader rules * refactor: correct async tab meta load logic * refactor: page suspense add fallback * feat: add default loading skeleton (#1512) * feat: add global loading logic # This is the 1st commit message: feat: add global loading logic # This is the commit message #2: chore: update # This is the commit message #3: feat: add Loading Skeleton # This is the commit message #4: feat: update # This is the commit message #5: chore: update Loading # This is the commit message #6: chore: update pnpm-lock.yaml # This is the commit message #7: chore: fix lock file # This is the commit message #8: Revert "chore: fix lock file" This reverts commit 73dee02. # This is the commit message #9: Revert "chore: update pnpm-lock.yaml" This reverts commit 3f6f579. # This is the commit message #10: chore: fix lock file # This is the commit message #11: chore: update logic # This is the commit message #12: chore(deps): bump umi@4.0.54 # This is the commit message #13: Revert "chore(deps): bump umi@4.0.54" This reverts commit 011ecf9. # This is the commit message #14: fix: fix path error on windows platform # This is the commit message #15: chore(deps): bump umi@4.0.54 # This is the commit message #16: chore: revert @umi/lint 4.0.54 => 4.0.53 Because there is breaking change # This is the commit message #17: chore(deps): upgrade umi@4.0.55 # This is the commit message #18: chore: update type # This is the commit message #19: chore: update Loading # This is the commit message #20: refactor: site template ignore dist dir (#1518) add /dist > .gitignore # This is the commit message #21: refactor: improve content padding when disable footer (#1517) * chore(theme): improve the default theme style * chore: update Content style * chore: update # This is the commit message #22: refactor: make chunk name clean for theme routes (#1513) fix: special links not working bug in markdown (#1524) * fix: absolute links and schema links lost bug in markdown * refactor: update relative link condition * refactor: update relative link condition for data url * Update src/loaders/markdown/transformer/rehypeLink.ts * Update src/loaders/markdown/transformer/rehypeLink.ts * refactor: new way to handle special links fix: workaround for helmet lost in ssr since umi@4.0.54 (#1525) * fix: helmet lost in ssr since umi@4.0.53 * refactor: patch helmet for version range * style: update fix: react types is missing in react template (#1526) build: release 2.1.15 Revert "Merge branch 'master' into wuxh/feat-1463" This reverts commit 6b344d9, reversing changes made to bfef009. * chore: update * chore: update lock file * docs: update dingtalk qrcode * fix: conventional 2-level nav lost in localized routes (#1951) * chore: bump @babel/traverse from 7.22.8 to 7.23.2 (#1947) Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.22.8 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build: release 2.2.14 * docs: correct spelling of code sandbox * fix: unexpected transformation of colon symbol (#1962) Co-authored-by: liangjun.chen <liangjun.chen@yunqutech.com> * chore: bump browserify-sign from 4.2.1 to 4.2.2 (#1954) Bumps [browserify-sign](https://github.com/crypto-browserify/browserify-sign) from 4.2.1 to 4.2.2. - [Changelog](https://github.com/browserify/browserify-sign/blob/main/CHANGELOG.md) - [Commits](browserify/browserify-sign@v4.2.1...v4.2.2) --- updated-dependencies: - dependency-name: browserify-sign dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: color select disappeared unexpectedly on simulator (#1976) * fix: wrong search scroll position of 1-level heading in current page (#1978) * fix: fixed the hash was cleared and did not scroll to the corresponding position * feat: 调整搜索逻辑，如果目标链接是本页 & !hash，则滚动到顶部 * fix: api table does not respect ignore flag (#1981) * build: release 2.2.15 * fix: handle unexpected oneof and allof for api metadata (#1982) * refactor: cache dir config can control compile fs cache location (#1984) * refactor: use async way to parse theme modules (#1983) * build: release 2.2.16 * chore: revert change * Revert "chore: revert change" This reverts commit 6eeac57. * chore: remove * feat: add loadcomp logic * chore: making the simple complicated is commonplace * Revert "Revert "chore: revert change"" This reverts commit fee192f. * chore: ? * chore: clean code * chore: update lock file * chore: update * chore: update style --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: PeachScript <scdzwyxst@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Optimistic-Chen <64662582+DBSDs@users.noreply.github.com> Co-authored-by: liangjun.chen <liangjun.chen@yunqutech.com> Co-authored-by: binyellow <571704908@qq.com> Co-authored-by: 阿平 <xierenyuan@qq.com> * refactor: optimize live demo feature in v2.3 (#1992) * refactor: clean up compile-time logic * feat: emit demo context in loader * refactor: clean up runtime api and slots * feat: add SourceCodeEditor slot * feat: add useLiveDemo api * refactor: rewrite live demo feature with useLiveDemo * feat: live demo support iframe mode * refactor: constants for browser runtime * fix: multi-instance problem and styles of live demo feature (#2001) * refactor: improve naming of useLiveDemo api * refactor: restore live config temporarily * fix: live demo error styles for compact demo * fix: wrong npm dependency meta in runtime * fix: multiple instance problem from demo context * refactor: avoid breaking change for useRouteMeta api (#2002) * refactor: avoid empty tabs from useRouteMeta * refactor: version check include prerelease * feat: live demo support custom tech stack (#2012) * feat: live demo support custom tech stack * feat: add live loading status for demo previewer * feat: useLiveDemo support iframe demo (#2013) * feat: useLiveDemo support iframe demo * refactor: exclude demo entry file from context * perf: skip outdated tasks for useLiveDemo * fix: unexpected suspense from useRouteMeta (#2019) * fix: unexpected suspense from useRouteMeta * refactor: remove use from useRouteMeta * feat: tech stack supports declare runtime plugin (#2020) * fix: overflow for source code editor (#2014) * fix: source code should wrap * fix: code scroll * chore: optimize * chore: code opt * chore: code clean * fix: code editor scroll bar should be draggable (#2023) * feat: support vue tech stack (#1922) * feat: add vue tech stack support * docs: techstack related how to use vue and how to add techstack support plugin * feat: add external api parser support 1. Add interfaces to allow dumi to integrate with an external api parser 2. Add dumi-vue-meta package, which can extract metadata from vue. 3. Add API tables support for dumi-plugin-vue * docs: api table support related * feat: add an option for changing tsconfig path Add the `tsconfigPath` option in `parserOptions` to allow user to customize tsconfig * refactor: give watcher creation rights to BaseAtomAssetsParser * docs: Update README.md * fix: type of function signature parameter needs to be string * refactor: code structure adjustment * fix: babel-plugin-iife type error * chore: use umi prebundled babel dependencies prebundle `@vue/babel-plugin-jsx` * feat: add onBlockLoad method for IDumiTechStack Provide a method for parsing custom files of frontend frameworks. * refactor: replace `babel-plugin-iife` with` transformDemoCode` * refactor: consolidate runtime related APIs into `IDumiTechStack` remove `useTechStackRuntimeApi` * feat: add createApiParser * fix: createApiParser * docs: techstack related * refactor: add bundle-utils * fix: support html2sketch * fix: html comments FrontMatter * feat: incorporate live demo into the techstack * fix: iframe mode * fix: issue introduced by @vue/babel-plugin-jsx vuejs/babel-plugin-jsx#687 * refactor: new design of techstack runtime options * fix: live demo loading * feat: check vue version * refactor: flatten options of preset-vue * refactor: remove id * docs: preset-vue and techstack * refactor: remove id of IDemoData * fix: demo error * fix: shoud pass id to useRenderer * fix: unexpected return type of useRouteMeta * refactor: improve vue tech stack support (#2036) * chore: update eslintignore * refactor: merge bundler-utils to tech-stack-utils * refactor: turn useRenderer to internal api * refactor: clean type definitions * refactor: export parser apis from tech-stack-utils * refactor: remove useless demo data from loader * build: clear build config for dumi-vue-meta * test: update test case * test: update case for parser * fix: unnecessary trailing line break for read-only source code (#2033) * fix: trim * fix: 兼容LiveDemo情况 --------- Co-authored-by: Peach <scdzwyxst@gmail.com> * fix: demo editor style and live re-render for mobile theme (#2025) * fix: theme-mobile sorce code editor style * feat: move Tooltip to slots * refactor: make tooltip as internal component * chore: clear diff for pnpm-lock.yaml * fix: mobile live demo --------- Co-authored-by: PeachScript <scdzwyxst@gmail.com> * feat: add defineTechStack api (#2042) * feat: add createTechStack api * refactor: change to defineTechStack, restore built-in ReactTechStack * refactor: remain consistent with the original interface --------- Co-authored-by: Peach <scdzwyxst@gmail.com> * feat: support code group container (#2059) * feat: markdown support CodeGroup feat: 基本实现 chore: update docs chore: style chore: update chore: update demo chore: update logic feat: update logic chore: update docs chore: remove chore: update chore: clean diff chore: update feat: update logic test: update test Revert "test: update test" This reverts commit 994414e. test: add unit test * chore: fix ts lint * chore: update code-group style * chore: update * test: update unit test * Update src/loaders/markdown/transformer/remarkContainer.ts Co-authored-by: Peach <scdzwyxst@gmail.com> * chore: update logic * chore: remove ts type * feat: updata tabs comp * chore: unified naming --------- Co-authored-by: Peach <scdzwyxst@gmail.com> * docs: describe for vue tech stack (#2050) * docs: vue related * docs: update defineTechStack * feat: improve api parser and json schema for vue (#2051) * feat: add functional component/generic component support * feat: add more typedoc/jsdoc tags version control and release related tags * fix: expose outside props * feat: add externalSymbolLinkMap support * fix: readme * fix: tests run on windows * feat: add source reference for interface, type alias, type params * fix: vue demo * fix: dynamic git revision * fix: tests on windows * refactor: remove version * feat: use dumi built-in function to generate source links * fix: multi-instance bug and unhandled error for live demo feature (#2078) * fix: external resolve and skip server render handle for liveDemo * fix: 依赖不再使用绝对路径 * fix: delete external * feat: optimize the error prompts and editing experience of vue demo (#2065) * feat: optimize the error prompts and editing experience of vue demo * refactor: use preflight option * refactor: optimize userRenderer * docs: vue supplement explanation (#2079) --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: 二货爱吃白萝卜 <smith3816@gmail.com> Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: 红 <wxh1220@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Optimistic-Chen <64662582+DBSDs@users.noreply.github.com> Co-authored-by: liangjun.chen <liangjun.chen@yunqutech.com> Co-authored-by: binyellow <571704908@qq.com> Co-authored-by: 阿平 <xierenyuan@qq.com> Co-authored-by: eternal~fire <jeffwcx@icloud.com> Co-authored-by: Zhou Bill <735051883@qq.com> Co-authored-by: Jinbao1001 <nodewebli@gmail.com>

zombieJ added 3 commits September 7, 2023 19:49

chore: all pass to lazy

2e4994b

chore: match route

da0100d

chore: meta demos

1b657d4

vercel bot deployed to Preview September 8, 2023 02:25 View deployment

zombieJ added 5 commits September 8, 2023 11:35

chore: support getDemoById

e0da9bd

chore: split code

6bc6d21

chore: merge feature

1d1bea2

chore: back of it

ff2c333

chore: getDemoById

5f84d24

vercel bot deployed to Preview September 8, 2023 06:50 View deployment

chore: support demo sus

283e131

vercel bot deployed to Preview September 8, 2023 07:41 View deployment

zombieJ added 2 commits September 8, 2023 15:47

chore: all demos

434aa49

chore: demo extract

a31b7ca

vercel bot deployed to Preview September 8, 2023 07:51 View deployment

chore: clean up

e38d447

zombieJ commented Sep 8, 2023

View reviewed changes

src/client/theme-api/DumiDemo/index.tsx Outdated Show resolved Hide resolved

zombieJ commented Sep 8, 2023

View reviewed changes

vercel bot deployed to Preview September 8, 2023 07:55 View deployment

zombieJ commented Sep 8, 2023

View reviewed changes

chore: clean up

9a8a9ab

zombieJ changed the title ~~[WIP] demo chunks~~ refactor: provider useDemoData which is given by getDemoById Sep 8, 2023

vercel bot deployed to Preview September 8, 2023 08:01 View deployment

zombieJ marked this pull request as ready for review September 8, 2023 08:02

PeachScript reviewed Sep 11, 2023

View reviewed changes

chore: rm fallback

9d570d2

vercel bot deployed to Preview September 11, 2023 03:45 View deployment

Merge remote-tracking branch 'origin/feature/2.3.0' into lazy-meta

5041d7b

vercel bot deployed to Preview September 11, 2023 06:51 View deployment

zombieJ merged commit 595a3d8 into feature/2.3.0 Sep 11, 2023
9 checks passed

zombieJ deleted the lazy-meta branch September 11, 2023 07:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: provider `useDemoData` which is given by `getDemoById` #1876

refactor: provider `useDemoData` which is given by `getDemoById` #1876

zombieJ commented Sep 8, 2023

vercel bot commented Sep 8, 2023 •

edited

Loading

zombieJ Sep 8, 2023

zombieJ Sep 8, 2023

zombieJ Sep 8, 2023

zombieJ Sep 8, 2023 •

edited

Loading

zombieJ Sep 8, 2023

zombieJ Sep 8, 2023

PeachScript Sep 8, 2023

zombieJ Sep 11, 2023

PeachScript Sep 11, 2023

zombieJ Sep 11, 2023

PeachScript Sep 8, 2023

zombieJ Sep 11, 2023

PeachScript Sep 11, 2023

zombieJ Sep 11, 2023

		@@ -0,0 +1,27 @@
		import Container from 'dumi/theme/builtins/Container';

		@@ -0,0 +1,70 @@
		import { SP_ROUTE_PREFIX } from '@/constants';

refactor: provider useDemoData which is given by getDemoById #1876

refactor: provider useDemoData which is given by getDemoById #1876

Conversation

zombieJ commented Sep 8, 2023

🤔 这个变动的性质是？/ What is the nature of this change?

🔗 相关 Issue / Related Issue

💡 需求背景和解决方案 / Background or solution

📝 更新日志 / Changelog

vercel bot commented Sep 8, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zombieJ Sep 8, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

refactor: provider `useDemoData` which is given by `getDemoById` #1876

refactor: provider `useDemoData` which is given by `getDemoById` #1876

vercel bot commented Sep 8, 2023 •

edited

Loading

zombieJ Sep 8, 2023 •

edited

Loading