MPA Mode

WinJS supports traditional MPA mode. In this mode, */index.[jt]sx? files in the src/pages directory are used as webpack entries for bundling, with no routing, no history, and no win.js, meeting the needs of scenarios such as H5 development and kitchen plugin development.

Note: This MPA mode has no routing mechanism and cannot use many plugin capabilities. It's only suitable for use as a build tool.

Usage

MPA is a built-in feature that can be enabled through configuration.

export default {
  mpa: {
    template: string,
    getConfigFromEntryFile: boolean,
    layout: string,
    entry: object,
  },
}

The MPA directory structure is src/pages/${dir}/index.[jt]sx. Each folder ${dir} generates a page, and the index.[jt]sx file within the folder is the entry file for that page.

Configuration options:

• template: HTML template for build artifacts. For example, template/index.html will search from the project root directory and use the index.html at the corresponding path as the HTML template for build artifacts.
• getConfigFromEntryFile: Read page-specific configuration from each page's entry file (src/*/index.tsx).
• layout: Global default layout.
• entry: Configuration for each entry file. For example, { foo: { title: '...' } } can configure the title property for the src/foo/index.tsx page.

Conventional Entry Files

The default entry files are */index.[jt]sx? files in the src/pages directory.

For example:

+ src/pages
  - foo/index.tsx
  - bar/index.tsx
  - hoo.tsx

Then, the entry structure would be:

{
  foo: 'src/pages/foo/index.tsx',
  bar: 'src/pages/bar/index.tsx'
}

After building, corresponding HTML files will be generated for each entry file, resulting in artifacts foo.html and bar.html.

Page-level Configuration

config.json

Configuration is conventionally declared through config.json at the same level as the entry file. For example, with the following directory structure:

+ src/pages
  + foo
    - index.tsx
    - config.json

foo/config.json configures the page's independent layout and title:

{
  "layout": "@/layouts/bar.ts",
  "title": "foooooo"
}

Currently supported configuration options include:

• template: Template path. Refer to html-webpack-plugin template syntax, using variables through lodash template syntax.
• layout: Page layout. It's recommended to reference files in the src directory starting with @/.
• title: Page title. Default is the directory name where the entry file is located.
• mountElementId: The ID of the node to mount to when rendering the page. Default is root.

getConfigFromEntryFile

WinJS also experimentally supports another configuration reading method, enabled by configuring mpa: { getConfigFromEntryFile: true }.

In this case, you can avoid using config.json and instead export the page configuration through export const config in the entry file.

For example:

// src/pages/foo/index.tsx
export const config = {
  layout: '@/layouts/bar.ts',
  title: 'foooooo',
}

entry

You can also configure each page in .winrc.ts:

  mpa: {
    entry: {
      foo: { title: 'foo title' }
    }
  }

On-demand Startup

Supports specifying which pages to start by setting env.MPA_FILTER to improve build speed:

# file .env
# Only bar and foo pages will be started
MPA_FILTER=bar,foo

Rendering

The default rendering method is Vue. Entry files only need to export Vue components for rendering.

<script setup>
  import { ref } from 'vue';
  /**
  * The following is example code only and can be extended and modified freely
  */
  const title = ref('Welcome to Your Vue.js App.');
</script>
<template>
  <div class="page page-hello">
    <div class="page-content">
      <!-- Static resource path example -->
      <img class="logo" src="@/assets/img/logo.png" alt="logo" />
      <h1>{{ title }}</h1>
      <p>
        For custom configuration guidance, please visit
        <a href="https://cloud-templates.github.io/create-project/" target="_blank" rel="noopener"
        >create-project documentation</a
        >.
      </p>
    </div>
  </div>
</template>

<style lang="less" scoped src="./style.less"></style>

Template

The default template is as follows:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <div id="<%= mountElementId %>"></div>
  </body>
</html>

You can customize the global HTML template through the template configuration, or configure page-level settings to use different templates for different pages. Please ensure that variables include at least <%= title %> and <%= mountElementId %>.