dataPieces within same page should be rendered with stable order

fix: #80

Author: csr632

packages/create-project/template-lib/docs/vite.config.ts

@@ -28,10 +28,17 @@ module.exports = {
                 if (!match) throw new Error('unexpected file: ' + absolute)
                 const [_, componentName, demoName] = match
                 const pageId = `/components/demos/${componentName}`
-                // set page data
-                const runtimeDataPaths = api.getRuntimeData(pageId)
-                // the ?demo query will wrap the module with useful demoInfo
-                runtimeDataPaths[demoName] = `${absolute}?demo`
+                // register page data
+                api.addPageData({
+                  pageId,
+                  key: demoName,
+                  // register demo runtime data path
+                  // the ?demo query will wrap the module with useful demoInfo
+                  // that will be consumed by theme-doc
+                  dataPath: `${absolute}?demo`,
+                  // register demo static data
+                  staticData: await helpers.extractStaticData(file),
+                })
               }
             )
           }
@@ -46,12 +53,14 @@ module.exports = {
               if (!match) throw new Error('unexpected file: ' + absolute)
               const [_, componentName] = match
               const pageId = `/components/${componentName}`
-              // set page data
-              const runtimeDataPaths = api.getRuntimeData(pageId)
-              runtimeDataPaths.main = absolute
-              // set page staticData
-              const staticData = api.getStaticData(pageId)
-              staticData.main = await helpers.extractStaticData(file)
+              // register page data
+              api.addPageData({
+                pageId,
+                // register demo runtime data path
+                dataPath: absolute,
+                // register demo static data
+                staticData: await helpers.extractStaticData(file),
+              })
             }
           )
         },

packages/create-project/template-lib/src/Button/demos/demo1.tsx

@@ -1,6 +1,7 @@
 /**
  * @title Button Demo1 Title
  * @description Button demo1 description
+ * @order 1
  */
 
 import React from 'react'

packages/create-project/template-lib/src/Button/demos/demo2.tsx

@@ -1,6 +1,7 @@
 /**
  * @title Button Demo2 Title
  * @description Button demo2 description
+ * @order 2
  */
 
 import React from 'react'

packages/theme-doc/src/index.tsx

@@ -52,22 +52,33 @@ export function createTheme(themeConfig: ThemeConfig): React.FC<ThemeProps> {
     }
 
     const pageStaticData = staticData[loadState.routePath]
-    const body = Object.entries(pageData).map(([key, dataPart], idx) => {
-      const ContentComp = (dataPart as any).default
-      const pageStaticDataPart = pageStaticData?.[key]
-      const content = (() => {
-        if (pageStaticDataPart?.sourceType === 'md')
-          return (
-            <MDX>
-              <ContentComp />
-            </MDX>
-          )
-        if (dataPart?.isDemo)
-          return <Demo style={{ margin: '16px 45px' }} {...dataPart} />
-        return <ContentComp />
-      })()
-      return <React.Fragment key={key}>{content}</React.Fragment>
-    })
+
+    const body = Object.entries(pageData)
+      .map(([key, dataPart], idx) => {
+        const ContentComp = (dataPart as any).default
+        const pageStaticDataPart = pageStaticData?.[key]
+        const content = (() => {
+          if (pageStaticDataPart?.sourceType === 'md')
+            return (
+              <MDX>
+                <ContentComp />
+              </MDX>
+            )
+          if (dataPart?.isDemo)
+            return <Demo style={{ margin: '16px 45px' }} {...dataPart} />
+          return <ContentComp />
+        })()
+        const result = <React.Fragment key={key}>{content}</React.Fragment>
+        let order = Number(pageStaticDataPart?.order || 1)
+        if (Number.isNaN(order)) order = 1
+        return { key, result, order }
+      })
+      .sort((a, b) => {
+        // sort by (order, key)
+        if (a.order !== b.order) return a.order - b.order
+        return a.key.localeCompare(b.key)
+      })
+      .map(({ result }) => result)
 
     return <AppLayout>{body}</AppLayout>
   }