sunmao-ui/packages/runtime/example/router/hashNested.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>meta-ui runtime example: nested hash router</title>
    <script>
      delete window.history;
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module">
      import renderApp from '../../src/main.tsx';
      renderApp({
        version: 'example/v1',
        metadata: {
          name: 'nested_hash_router',
          description: 'nested hash router example',
        },
        spec: {
          components: [
            {
              id: 'parent',
              type: 'core/v1/router',
              properties: {
                switchPolicy: [
                  {
                    type: 'route',
                    path: '/1',
                    slotId: 'child1',
                    default: true,
                  },
                  {
                    type: 'route',
                    path: '/2',
                    slotId: 'child2',
                    default: false,
                  },
                ],
              },
              traits: [],
            },
            {
              id: 'child1',
              type: 'core/v1/router',
              properties: {
                switchPolicy: [
                  {
                    type: 'route',
                    path: '/1',
                    slotId: 'grandchild1_1',
                    default: true,
                  },
                  {
                    type: 'route',
                    path: '/2',
                    slotId: 'grandchild1_2',
                    default: false,
                  },
                  {
                    type: 'route',
                    path: '/3',
                    slotId: 'grandchild1_3',
                    default: false,
                  },
                ],
              },
              traits: [
                {
                  type: 'core/v1/slot',
                  properties: {
                    container: {
                      id: 'parent',
                      slot: 'child1',
                    },
                  },
                },
              ],
            },
            {
              id: 'child2',
              type: 'core/v1/router',
              properties: {
                switchPolicy: [
                  {
                    type: 'route',
                    path: '/1',
                    slotId: 'grandchild2_1',
                    default: true,
                  },
                  {
                    type: 'route',
                    path: '/2',
                    slotId: 'grandchild2_2',
                    default: false,
                  },
                  {
                    type: 'route',
                    path: '/3',
                    slotId: 'grandchild2_3',
                    default: false,
                  },
                ],
              },
              traits: [
                {
                  type: 'core/v1/slot',
                  properties: {
                    container: {
                      id: 'parent',
                      slot: 'child2',
                    },
                  },
                },
              ],
            },
            {
              id: 'grandchild1_1',
              type: 'core/v1/text',
              properties: {
                value: {
                  raw: '1_1',
                  format: 'plain',
                },
              },
              traits: [
                {
                  type: 'core/v1/slot',
                  properties: {
                    container: {
                      id: 'child1',
                      slot: 'grandchild1_1',
                    },
                  },
                },
              ],
            },
            {
              id: 'grandchild1_2',
              type: 'core/v1/text',
              properties: {
                value: {
                  raw: '1_2',
                  format: 'plain',
                },
              },
              traits: [
                {
                  type: 'core/v1/slot',
                  properties: {
                    container: {
                      id: 'child1',
                      slot: 'grandchild1_2',
                    },
                  },
                },
              ],
            },
            {
              id: 'grandchild1_3',
              type: 'core/v1/text',
              properties: {
                value: {
                  raw: '1_3',
                  format: 'plain',
                },
              },
              traits: [
                {
                  type: 'core/v1/slot',
                  properties: {
                    container: {
                      id: 'child1',
                      slot: 'grandchild1_3',
                    },
                  },
                },
              ],
            },
            {
              id: 'grandchild2_1',
              type: 'core/v1/text',
              properties: {
                value: {
                  raw: '2_1',
                  format: 'plain',
                },
              },
              traits: [
                {
                  type: 'core/v1/slot',
                  properties: {
                    container: {
                      id: 'child2',
                      slot: 'grandchild2_1',
                    },
                  },
                },
              ],
            },
            {
              id: 'grandchild2_2',
              type: 'core/v1/text',
              properties: {
                value: {
                  raw: '2_2',
                  format: 'plain',
                },
              },
              traits: [
                {
                  type: 'core/v1/slot',
                  properties: {
                    container: {
                      id: 'child2',
                      slot: 'grandchild2_2',
                    },
                  },
                },
              ],
            },
            {
              id: 'grandchild2_3',
              type: 'core/v1/text',
              properties: {
                value: {
                  raw: '2_3',
                  format: 'plain',
                },
              },
              traits: [
                {
                  type: 'core/v1/slot',
                  properties: {
                    container: {
                      id: 'child2',
                      slot: 'grandchild2_3',
                    },
                  },
                },
              ],
            },
          ],
        },
      });
    </script>
  </body>
</html>
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8" />`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
misc update on router 1. update example page's title 2. pass params to ImplWrapper(currently not pass it to the component, need discussion on it) 2021-08-16 10:34:27 +08:00			`<title>meta-ui runtime example: nested hash router</title>`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`<script>`
			`delete window.history;`
			`</script>`
			`</head>`
			`<body>`
			`<div id="root"></div>`
			`<script type="module">`
format all code 2021-08-31 11:17:19 +08:00			`import renderApp from '../../src/main.tsx';`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`renderApp({`
format all code 2021-08-31 11:17:19 +08:00			`version: 'example/v1',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`metadata: {`
format all code 2021-08-31 11:17:19 +08:00			`name: 'nested_hash_router',`
			`description: 'nested hash router example',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`spec: {`
			`components: [`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`id: 'parent',`
			`type: 'core/v1/router',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
refactor router component 1. refactor most of the component from wouter. 2. add support for route parameter 3. add support for strict and exact matching 4. modify the createRouter function of wouter to remove the top level RouterProvider 5. move matcher to route level not the top level 2021-08-24 16:20:00 +08:00			`switchPolicy: [`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'route',`
			`path: '/1',`
			`slotId: 'child1',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`default: true,`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'route',`
			`path: '/2',`
			`slotId: 'child2',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`default: false,`
			`},`
			`],`
			`},`
			`traits: [],`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`id: 'child1',`
			`type: 'core/v1/router',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
refactor router component 1. refactor most of the component from wouter. 2. add support for route parameter 3. add support for strict and exact matching 4. modify the createRouter function of wouter to remove the top level RouterProvider 5. move matcher to route level not the top level 2021-08-24 16:20:00 +08:00			`switchPolicy: [`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'route',`
			`path: '/1',`
			`slotId: 'grandchild1_1',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`default: true,`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'route',`
			`path: '/2',`
			`slotId: 'grandchild1_2',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`default: false,`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'route',`
			`path: '/3',`
			`slotId: 'grandchild1_3',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`default: false,`
			`},`
			`],`
			`},`
			`traits: [`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'core/v1/slot',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`container: {`
format all code 2021-08-31 11:17:19 +08:00			`id: 'parent',`
			`slot: 'child1',`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`},`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`],`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`id: 'child2',`
			`type: 'core/v1/router',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
refactor router component 1. refactor most of the component from wouter. 2. add support for route parameter 3. add support for strict and exact matching 4. modify the createRouter function of wouter to remove the top level RouterProvider 5. move matcher to route level not the top level 2021-08-24 16:20:00 +08:00			`switchPolicy: [`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'route',`
			`path: '/1',`
			`slotId: 'grandchild2_1',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`default: true,`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'route',`
			`path: '/2',`
			`slotId: 'grandchild2_2',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`default: false,`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'route',`
			`path: '/3',`
			`slotId: 'grandchild2_3',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`default: false,`
			`},`
			`],`
			`},`
			`traits: [`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'core/v1/slot',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`container: {`
format all code 2021-08-31 11:17:19 +08:00			`id: 'parent',`
			`slot: 'child2',`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`},`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`],`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`id: 'grandchild1_1',`
			`type: 'core/v1/text',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
			`value: {`
format all code 2021-08-31 11:17:19 +08:00			`raw: '1_1',`
			`format: 'plain',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`traits: [`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'core/v1/slot',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`container: {`
format all code 2021-08-31 11:17:19 +08:00			`id: 'child1',`
			`slot: 'grandchild1_1',`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`},`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`],`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`id: 'grandchild1_2',`
			`type: 'core/v1/text',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
			`value: {`
format all code 2021-08-31 11:17:19 +08:00			`raw: '1_2',`
			`format: 'plain',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`traits: [`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'core/v1/slot',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`container: {`
format all code 2021-08-31 11:17:19 +08:00			`id: 'child1',`
			`slot: 'grandchild1_2',`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`},`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`],`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`id: 'grandchild1_3',`
			`type: 'core/v1/text',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
			`value: {`
format all code 2021-08-31 11:17:19 +08:00			`raw: '1_3',`
			`format: 'plain',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`traits: [`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'core/v1/slot',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`container: {`
format all code 2021-08-31 11:17:19 +08:00			`id: 'child1',`
			`slot: 'grandchild1_3',`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`},`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`],`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`id: 'grandchild2_1',`
			`type: 'core/v1/text',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
			`value: {`
format all code 2021-08-31 11:17:19 +08:00			`raw: '2_1',`
			`format: 'plain',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`traits: [`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'core/v1/slot',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`container: {`
format all code 2021-08-31 11:17:19 +08:00			`id: 'child2',`
			`slot: 'grandchild2_1',`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`},`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`],`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`id: 'grandchild2_2',`
			`type: 'core/v1/text',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
			`value: {`
format all code 2021-08-31 11:17:19 +08:00			`raw: '2_2',`
			`format: 'plain',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`traits: [`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'core/v1/slot',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`container: {`
format all code 2021-08-31 11:17:19 +08:00			`id: 'child2',`
			`slot: 'grandchild2_2',`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`},`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`],`
			`},`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`id: 'grandchild2_3',`
			`type: 'core/v1/text',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
			`value: {`
format all code 2021-08-31 11:17:19 +08:00			`raw: '2_3',`
			`format: 'plain',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`traits: [`
			`{`
format all code 2021-08-31 11:17:19 +08:00			`type: 'core/v1/slot',`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`properties: {`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`container: {`
format all code 2021-08-31 11:17:19 +08:00			`id: 'child2',`
			`slot: 'grandchild2_3',`
replace route trait by slot trait 1. replace route trait by slot trait 2. update example 2021-08-25 10:57:19 +08:00			`},`
hash router 1. update example with hash router (not work good with nested hash router) 2021-08-12 18:59:12 +08:00			`},`
			`},`
			`],`
			`},`
			`],`
			`},`
			`});`
			`</script>`
			`</body>`
			`</html>`