{JSON.stringify(state, null, 2)}
18 | }
19 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/basic-state/__tests__/a.test.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lucifier129/react-imvc/36a7fb0d77ae84275f5caa4f355fd3fbdb133823/packages/react-imvc-v2/project/src/basic-state/__tests__/a.test.js
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/basic-state/__tests__/a.test.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lucifier129/react-imvc/36a7fb0d77ae84275f5caa4f355fd3fbdb133823/packages/react-imvc-v2/project/src/basic-state/__tests__/a.test.ts
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/error-boundary/Controller.js:
--------------------------------------------------------------------------------
1 | import Controller from '../../../controller'
2 | import ErrorBoundary from '../../../component/ErrorBoundary'
3 | import React, { useState, useEffect } from 'react'
4 |
5 | export default class extends Controller {
6 | SSR = true // enable server side rendering
7 | View = View
8 | actions = {
9 | TEST: () => {
10 | throw new Error('action-test')
11 | },
12 | }
13 | // componentWillCreate() {
14 | // throw new Error('componentWillCreate')
15 | // }
16 | getComponentFallback(displayName) {
17 | return `component-fallback: ${displayName}`
18 | }
19 | getViewFallback() {
20 | return 'view-fallback'
21 | }
22 | errorDidCatch(error, type) {
23 | console.log('error-did-catch', type, error)
24 | }
25 | componentDidMount() {
26 | setTimeout(() => {
27 | this.store.actions.TEST()
28 | })
29 | }
30 | }
31 |
32 | function View() {
33 | return (
34 | <>
35 |
36 | 37 |
12 |
19 | )
20 | }
21 |
22 | export default Counter
23 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/lazy/B.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export type CounterProps = {
4 | count: number
5 | }
6 |
7 | export const Counter = (props: CounterProps) => {
8 | const [count, setCount] = React.useState(props.count)
9 |
10 | return (
11 | Counter A
13 |14 | 15 | {count} 16 | 17 |
18 |
12 |
19 | )
20 | }
21 |
22 | export default Counter
23 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/lazy/C.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export type CounterProps = {
4 | count: number
5 | }
6 |
7 | export const Counter = (props: CounterProps) => {
8 | const [count, setCount] = React.useState(props.count)
9 |
10 | return (
11 | Counter B
13 |14 | 15 | {count} 16 | 17 |
18 |
12 |
19 | )
20 | }
21 |
22 | export default Counter
23 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/lazy/D.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export type CounterProps = {
4 | count: number
5 | }
6 |
7 | export const Counter = (props: CounterProps) => {
8 | const [count, setCount] = React.useState(props.count)
9 |
10 | return (
11 | Counter C
13 |14 | 15 | {count} 16 | 17 |
18 |
12 |
19 | )
20 | }
21 |
22 | export default Counter
23 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/lazy/E.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export type CounterProps = {
4 | count: number
5 | }
6 |
7 | export const Counter = (props: CounterProps) => {
8 | const [count, setCount] = React.useState(props.count)
9 |
10 | return (
11 | Counter D
13 |14 | 15 | {count} 16 | 17 |
18 |
12 |
19 | )
20 | }
21 |
22 | export default Counter
23 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/lazy/controller.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Controller from '../../../controller'
3 | import { lazy } from '../../../hoc/lazy'
4 |
5 | const components = {
6 | A: lazy(() => import('./A')),
7 | B: lazy(() => import('./B')),
8 | C: lazy(() => import('./C')),
9 | D: lazy(() => import('./D')),
10 | E: lazy(() => import('./E')),
11 | }
12 |
13 | export default class extends Controller {
14 | View = View
15 | async loadComponents() {
16 | await Promise.all([components.A.load(), components.B.load(), components.C.load()])
17 | }
18 | async componentWillCreate() {
19 | await this.loadComponents()
20 | }
21 | async viewWillHydrate() {
22 | await this.loadComponents()
23 | }
24 | }
25 |
26 | type ViewProps = {}
27 |
28 | function View({}: ViewProps) {
29 | return (
30 | Counter E
13 |14 | 15 | {count} 16 | 17 |
18 |
31 |
39 |
47 | fallback for d
} />
51 |
30 |
31 | {state.count}
32 |
33 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/prefetch-header/Controller.tsx:
--------------------------------------------------------------------------------
1 | import Controller from '../../../controller'
2 | import React from 'react'
3 | import { Style } from '../../../component'
4 |
5 | const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
6 |
7 | export default class extends Controller {
8 | // SSR = false // enable server side rendering
9 | preload = {
10 | css: '/prefetch-header/preload.css',
11 | }
12 | View = View
13 | disableEarlyHints: boolean = false
14 | async componentWillCreate() {
15 | this.addEarlyHintsLinks([
16 | {
17 | uri: '/img/react.png',
18 | rel: 'preload',
19 | as: 'image',
20 | },
21 | {
22 | uri: '/prefetch-header/preload.css',
23 | rel: 'preload',
24 | as: 'style',
25 | },
26 | ])
27 |
28 | this.flushHeaders()
29 |
30 | await delay(500)
31 | }
32 | constructor(location: any, context: any) {
33 | super(location, context)
34 | }
35 | }
36 |
37 | function View() {
38 | return (
39 |
40 |
41 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/prefetch-header/preload.css:
--------------------------------------------------------------------------------
1 | .style {
2 | height: 50px
3 | }
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/preload/Controller.js:
--------------------------------------------------------------------------------
1 | import Controller from '../../../controller'
2 | import { Style } from '../../../component'
3 | import React from 'react'
4 | import style from './style.css'
5 |
6 | export default class extends Controller {
7 | SSR = this.location.query.ssr !== '0'
8 | View = View
9 | constructor(location, context) {
10 | super(location, context)
11 | if (context.isClient) {
12 | window.controller = this
13 | } else if (context.isServer) {
14 | global.controller = this
15 | }
16 | }
17 | preload = {
18 | style: style,
19 | }
20 | publicPathPlaceholder = '#public_path'
21 | }
22 |
23 | function View({ state }) {
24 | return (
25 | <>
26 |
27 | static view content
42 | {JSON.stringify(state, null, 2)}
28 |
29 | {JSON.stringify(state, null, 2)}
36 | }
37 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/static-view-csr/Controller.js:
--------------------------------------------------------------------------------
1 | import Controller from '../../../controller'
2 | import React from 'react'
3 | export default class extends Controller {
4 | SSR = false // disable server side rendering
5 | View = View
6 | }
7 |
8 | function View() {
9 | return static view content by client side rendering
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/src/static-view/Controller.js:
--------------------------------------------------------------------------------
1 | import Controller from '../../../controller'
2 | import React from 'react'
3 | export default class extends Controller {
4 | SSR = true // enable server side rendering
5 | View = View
6 | }
7 |
8 | function View() {
9 | return static view content
10 | }
11 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/start.js:
--------------------------------------------------------------------------------
1 | process.env.NODE_ENV = 'development'
2 | const start = require('../start/babel')
3 | let PORT = 3333
4 | const ROOT = __dirname
5 | const config = {
6 | root: ROOT, // 项目根目录
7 | port: PORT, // server 端口号
8 | // basename: ['/a', '/b'],
9 | routes: 'routes', // 服务端路由目录
10 | layout: 'Layout', // 自定义 Layout
11 | staticPath: '/my_static', // 静态资源目录
12 | useFileLoader: true,
13 | publish: '../project_publish', // 打包输出目录
14 | // bundleAnalyzer: true,
15 | // useTypeCheck: true
16 | }
17 |
18 | async function main() {
19 | let { app, server } = await start({ config })
20 | console.log('started')
21 | }
22 |
23 | main()
24 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/project/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "outDir": "dist",
5 | "declaration": true,
6 | "sourceMap": false,
7 | "target": "es5",
8 | "module": "commonjs",
9 | "skipLibCheck": true,
10 | "allowSyntheticDefaultImports": true,
11 | "moduleResolution": "node",
12 | "allowJs": true,
13 | "checkJs": false,
14 | "noUnusedLocals": true,
15 | "strict": true,
16 | "noImplicitAny": true,
17 | "noImplicitReturns": true,
18 | "preserveConstEnums": true,
19 | "noImplicitThis": true,
20 | "resolveJsonModule": true,
21 | "esModuleInterop": true,
22 | "removeComments": false,
23 | "jsx": "react",
24 | "types": ["node"],
25 | "rootDir": "../../"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/scripts/build.js:
--------------------------------------------------------------------------------
1 | let options = require('yargs').argv
2 | require('../build')(options)
3 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/scripts/start.js:
--------------------------------------------------------------------------------
1 | process.env.NODE_ENV = process.env.NODE_ENV || 'development'
2 |
3 | let options = require('yargs').argv
4 |
5 | if (process.env.NODE_ENV === 'development') {
6 | let getConfig = require('../config')
7 | let config = getConfig(options)
8 | require('@babel/register')({
9 | ...config.babel(true, config),
10 | extensions: ['.es6', '.es', '.jsx', '.js', '.mjs', '.ts', '.tsx'],
11 | })
12 | }
13 |
14 | require('../start/index')({
15 | ...options,
16 | fromScript: true,
17 | })
18 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/scripts/test.js:
--------------------------------------------------------------------------------
1 | process.env.BABEL_ENV = 'test'
2 | process.env.NODE_ENV = 'test'
3 |
4 | // Makes the script crash on unhandled rejections instead of silently
5 | // ignoring them. In the future, promise rejections that are not handled will
6 | // terminate the Node.js process with a non-zero exit code.
7 | process.on('unhandledRejection', (error) => {
8 | throw error
9 | })
10 |
11 | require('core-js/stable')
12 | require('regenerator-runtime/runtime')
13 |
14 | let options = require('yargs').argv
15 | let getConfig = require('../config')
16 | let config = getConfig(options)
17 | require('@babel/register')({
18 | ...config.babel(true, config),
19 | extensions: ['.es6', '.es', '.jsx', '.js', '.mjs', '.ts', '.tsx'],
20 | })
21 |
22 | let Mocha = require('mocha')
23 | let fs = require('fs')
24 | let path = require('path')
25 |
26 | // Instantiate a Mocha instance.
27 | let mocha = new Mocha(options)
28 |
29 | function travelDirectoryToAddTestFiles(dir) {
30 | fs.readdirSync(dir).forEach((file) => {
31 | let filename = path.join(dir, file)
32 | // ignore node_modules
33 | if (filename.indexOf('node_modules') !== -1) {
34 | return
35 | }
36 | // read file deeply
37 | if (fs.statSync(filename).isDirectory()) {
38 | return travelDirectoryToAddTestFiles(filename)
39 | }
40 | // add *test.js file to the mocha instance
41 | if (filename.substr(-8) === '-test.js') {
42 | return mocha.addFile(filename)
43 | }
44 | })
45 | }
46 |
47 | travelDirectoryToAddTestFiles(process.cwd())
48 |
49 | // Run the tests.
50 | mocha.run(function (failures) {
51 | process.on('exit', function () {
52 | process.exit(failures) // exit with non-zero status if there were failures
53 | })
54 | })
55 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/start/babel.js:
--------------------------------------------------------------------------------
1 | const babel = require('../config/babel')
2 | const defaultConfig = require('../config/config.defaults')
3 |
4 | require('@babel/register')({
5 | ...babel(true, defaultConfig),
6 | extensions: ['.es6', '.es', '.jsx', '.js', '.mjs', '.ts', '.tsx'],
7 | })
8 |
9 | module.exports = require('./index')
10 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "esModuleInterop": true,
8 | "allowSyntheticDefaultImports": true,
9 | "strict": true,
10 | "forceConsistentCasingInFileNames": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "noEmit": true,
16 | "jsx": "preserve"
17 | },
18 | "include": ["."]
19 | }
20 |
--------------------------------------------------------------------------------
/packages/react-imvc-v2/util/htmlescape.ts:
--------------------------------------------------------------------------------
1 | // This utility is based on https://github.com/zertosh/htmlescape
2 | // License: https://github.com/zertosh/htmlescape/blob/0527ca7156a524d256101bb310a9f970f63078ad/LICENSE
3 |
4 | const ESCAPE_LOOKUP: { [match: string]: string } = {
5 | '&': '\\u0026',
6 | '>': '\\u003e',
7 | '<': '\\u003c',
8 | '\u2028': '\\u2028',
9 | '\u2029': '\\u2029',
10 | }
11 |
12 | const ESCAPE_REGEX = /[&><\u2028\u2029]/g
13 |
14 | export function htmlEscapeJsonString(str: string): string {
15 | return str.replace(ESCAPE_REGEX, (match) => ESCAPE_LOOKUP[match])
16 | }
17 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/.github/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Code of Conduct
2 |
3 | As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
4 |
5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of the level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
6 |
7 | Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
8 |
9 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
10 |
11 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers.
12 |
13 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/)
14 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/.github/CONTRIBUTE.md:
--------------------------------------------------------------------------------
1 | # React-IMVC Contributing Guide
2 |
3 | - [Code of Conduct](./CODE_OF_CONDUCT.md)
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/.github/workflows/nodejs.yml:
--------------------------------------------------------------------------------
1 | # This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3 |
4 | name: IMVC
5 |
6 | on:
7 | push:
8 | branches: [master]
9 | pull_request:
10 | branches: [master]
11 |
12 | jobs:
13 | build:
14 | runs-on: ${{ matrix.os }}
15 |
16 | strategy:
17 | matrix:
18 | node-version: [10.x, 12.x, 14.x, 16.x, 17.x]
19 | os: [ubuntu-latest, macos-latest, windows-latest]
20 |
21 | steps:
22 | - uses: actions/checkout@v2
23 | - name: Use Node.js ${{ matrix.node-version }}
24 | uses: actions/setup-node@v1
25 | with:
26 | node-version: ${{ matrix.node-version }}
27 | - run: yarn
28 | - run: yarn build
29 | - run: yarn test
30 | env:
31 | CI: true
32 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/.github/workflows/playwright.yml:
--------------------------------------------------------------------------------
1 | name: Playwright Tests
2 | on:
3 | push:
4 | branches: [main, master]
5 | pull_request:
6 | branches: [main, master]
7 | jobs:
8 | test:
9 | timeout-minutes: 60
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v2
13 | - uses: actions/setup-node@v2
14 | with:
15 | node-version: '14.x'
16 | - name: Install dependencies
17 | run: yarn
18 | - name: Install Playwright
19 | run: npx playwright install --with-deps
20 | - name: Run Playwright tests
21 | run: yarn playwright test
22 | - uses: actions/upload-artifact@v2
23 | if: always()
24 | with:
25 | name: playwright-report
26 | path: playwright-report/
27 | retention-days: 30
28 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 |
6 | # production
7 | publish
8 | .idea
9 |
10 | # misc
11 | .DS_Store
12 | npm-debug.log
13 | .vscode
14 | _site
15 | mock/test.json
16 |
17 | dist
18 | coverage
19 | .npmrc
20 | test-results/
21 | playwright-report/
22 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "semi": false,
3 | "singleQuote": true,
4 | "printWidth": 80
5 | }
6 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 工业聚
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/bin/scripts.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | require('../dist/bin/scripts')
3 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/build/createGulpTask.d.ts:
--------------------------------------------------------------------------------
1 | import createGulpTask from '../dist/build/createGulpTask'
2 | export default createGulpTask
3 | export * from '../dist/build/createGulpTask'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/build/createGulpTask.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/build/createGulpTask')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/build/createWebpackConfig.d.ts:
--------------------------------------------------------------------------------
1 | import createWebpackConfig from '../dist/build/createWebpackConfig'
2 | export default createWebpackConfig
3 | export * from '../dist/build/createWebpackConfig'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/build/createWebpackConfig.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/build/createGulpTask')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/build/index.d.ts:
--------------------------------------------------------------------------------
1 | import build from '../dist/build'
2 | export default build
3 | export * from '../dist/build'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/build/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/build')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/build/setup-dev-env.d.ts:
--------------------------------------------------------------------------------
1 | import setupDevEnv from '../dist/build/setup-dev-env'
2 | export default setupDevEnv
3 | export * from '../dist/build/setup-dev-env'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/build/setup-dev-env.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/build/setup-dev-env')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/ControllerProxy/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/ControllerProxy'
2 | import ControllerProxy from '../../dist/component/ControllerProxy'
3 | export default ControllerProxy
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/ControllerProxy/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../dist/component/ControllerProxy')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/ErrorBoundary/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/ErrorBoundary'
2 | import ErrorBoundary from '../../dist/component/ErrorBoundary'
3 | export default ErrorBoundary
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/ErrorBoundary/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../dist/component/ErrorBoundary')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/EventWrapper/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/EventWrapper'
2 | import EventWrapper from '../../dist/component/EventWrapper'
3 | export default EventWrapper
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/EventWrapper/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../dist/component/EventWrapper')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/Input/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/Input'
2 | import Input from '../../dist/component/Input'
3 | export default Input
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/Input/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../dist/component/Input')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/Link/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/Link'
2 | import Link from '../../dist/component/Link'
3 | export default Link
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/Link/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../dist/component/Link')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/NavLink/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/NavLink'
2 | import NavLink from '../../dist/component/NavLink'
3 | export default NavLink
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/NavLink/index.js:
--------------------------------------------------------------------------------
1 | module.export = require('../../dist/component/NavLink')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/OuterClickWrapper/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/OuterClickWrapper'
2 | import OuterClickWrapper from '../../dist/component/OuterClickWrapper'
3 | export default OuterClickWrapper
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/OuterClickWrapper/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../dist/component/OuterClickWrapper')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/Prefetch/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/Prefetch'
2 | import Prefetch from '../../dist/component/Prefetch'
3 | export default Prefetch
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/Prefetch/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../dist/component/Prefetch')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/Script/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/Script'
2 | import Script from '../../dist/component/Script'
3 | export default Script
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/Script/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../dist/component/Script')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/Style/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/Style'
2 | import Style from '../../dist/component/Style'
3 | export default Style
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/Style/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../dist/component/Style')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/ViewManager/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../../dist/component/ViewManager'
2 | import ViewManager from '../../dist/component/ViewManager'
3 | export default ViewManager
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/ViewManager/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../../dist/component/ViewManager')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from '../dist/component'
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/component/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/component')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/config/babel.d.ts:
--------------------------------------------------------------------------------
1 | import babel from '../dist/config/babel'
2 | export default babel
3 | export * from '../dist/config/babel'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/config/babel.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/config/babel')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/config/config.defaults.d.ts:
--------------------------------------------------------------------------------
1 | import defaults from '../dist/config/config.defaults'
2 | export default defaults
3 | export * from '../dist/config/config.defaults'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/config/config.defaults.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/config/config.defaults')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/config/index.d.ts:
--------------------------------------------------------------------------------
1 | import defaults from '../dist/config'
2 | export default defaults
3 | export * from '../dist/config'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/config/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/config')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/context/index.d.ts:
--------------------------------------------------------------------------------
1 | import context from '../dist/context'
2 | export default context
3 | export * from '../dist/context'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/context/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/context')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/controller/actions.d.ts:
--------------------------------------------------------------------------------
1 | import actions from '../dist/controller/actions'
2 | export default actions
3 | export * from '../dist/controller/actions'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/controller/actions.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/controller/actions')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/controller/attachDevToolsIfPossible.d.ts:
--------------------------------------------------------------------------------
1 | import attachDevToolsIfPossible from '../dist/controller/attachDevToolsIfPossible'
2 | export default attachDevToolsIfPossible
3 | export * from '../dist/controller/attachDevToolsIfPossible'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/controller/attachDevToolsIfPossible.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/controller/attachDevToolsIfPossible')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/controller/index.d.ts:
--------------------------------------------------------------------------------
1 | import Controller from '../dist/controller'
2 | export default Controller
3 | export * from '../dist/controller'
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/controller/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('../dist/controller')
2 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/doc/Config/README.md:
--------------------------------------------------------------------------------
1 | # 介绍
2 |
3 | 配置文件为当前项目提供各个开发、打包流程的文件和配置信息。在一个项目中一般需要两份配置，一份在 `imvc.config.js` 中，这一份配置适用于项目的开发、测试和构建流程；另一份在 `start.js` 中，用于构建之后，在生产环境下运行的入口文件。当然，因为有默认配置，所以这两份配置都是可选的。
4 |
5 | 接下来我们看看，这两分配置的使用方式。
6 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/doc/Config/usage.md:
--------------------------------------------------------------------------------
1 | # 设置方式
2 |
3 | 上面提到需要设置两份配置：一份在项目配置文件 `imvc.config.js` 中，另一份在 `start.js` 中。
4 |
5 | ## 配置文件
6 |
7 | 目前配置文件支持五种类型文件：JS、TS、JSX、TSX、JSON。在 JS、TS、JSX、TSX 文件中最终要以 CommonJS 或 ES6 的方式导出配置信息。推荐使用 TS 文件，一遍对配置信息进行类型约束。示例如下：
8 |
9 | ```ts
10 | import path from 'path'
11 | import { defineConfig } from 'react-imvc'
12 |
13 | let PORT = 33336
14 | const ROOT = __dirname
15 |
16 | const config = defineConfig({
17 | root: ROOT, // 项目根目录
18 | port: PORT, // server 端口号
19 | routes: 'routes', // 服务端路由目录
20 | layout: 'Layout', // 自定义 Layout
21 | staticEntry: 'index.html',
22 | publish: '../publish',
23 | output: {
24 | path: path.resolve(ROOT, '../publish/static'),
25 | },
26 | webpackDevMiddleware: true,
27 | })
28 |
29 | export default config
30 | ```
31 |
32 | 或者 JSON 文件：
33 |
34 | ```json
35 | {
36 | "root": "", // 项目根目录
37 | "port": "3000", // server 端口号
38 | "routes": "routes", // 服务端路由目录
39 | "layout": "Layout", // 自定义 Layout
40 | "staticEntry": "index.html",
41 | "publish": "../publish",
42 | "output": {
43 | "path": "../publish/static"
44 | },
45 | "webpackDevMiddleware": true
46 | }
47 | ```
48 |
49 | ## 启动文件
50 |
51 | 启动文件中需要使用 React-IMVC 中暴露的接口启动，使用方式如下：
52 |
53 | ```ts
54 | import { start, defineConfig } from 'react-imvc'
55 |
56 | const PORT: number = 3333
57 | const ROOT = __dirname
58 | const config = defineConfig({
59 | root: ROOT, // 项目根目录
60 | port: PORT, // server 端口号
61 | routes: 'routes', // 服务端路由目录
62 | layout: 'Layout', // 自定义 Layout
63 | })
64 |
65 | async function main() {
66 | let { app, server } = await start({ config })
67 | console.log('started')
68 | }
69 |
70 | main()
71 | ```
72 |
73 | > TIP
74 | >
75 | > 启动文件中也可以引用配置文件 `imvc.config.ts` 中的配置。
76 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/doc/Isomorphic/README.md:
--------------------------------------------------------------------------------
1 | # 介绍
2 |
3 | 之前我们提到，在 React-IMVC 中 MVC 都是同构的，可以在服务器端和浏览器端同时运行，下面我们会详细介绍这一部分的特性及功能。
4 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/doc/Isomorphic/api.md:
--------------------------------------------------------------------------------
1 | # 接口路由
2 |
3 | 除了 fetch 相关的功能，我们还提供了接口路径自定义的功能。
4 |
5 | ## 属性设置
6 |
7 | ### API
8 |
9 | 类型：`Record
25 |
26 |
27 | )
28 | }
29 | ```
30 |
31 | ## View 组件中定义
32 |
33 | 示例如下：
34 |
35 | ```ts
36 | function View() {
37 | handleClick = () => {
38 | ...
39 | }
40 | return (
41 |
42 |
43 |
44 | )
45 | }
46 | ```
47 |
48 | ## 总结
49 |
50 | 两种方式各有利弊，在 Controller 中定义，所有组件都可以使用，并且在处理函数中可以通过 `this` 关键字调用和获取 Controller 中的数据和内置函数、自定义函数等，但必须要通过 Controller 实例 `ctrl` 才能使用，而在 View 组件中定义较为灵活，且不受 `ctrl` 限制，但在实现时，则无法直接获取 Controller 中的内容，使用范围也不确定，所以没有那种方式是推荐的，具体视情况而定。
51 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/doc/Isomorphic/hoc.md:
--------------------------------------------------------------------------------
1 | # 高阶组件
2 |
3 | React-IMVC 提供了高阶组件，可以便利地实现一些特殊需求。
4 |
5 | ## connect
6 |
7 | 类型：
8 |
9 | ```ts
10 |
37 |
42 | )
43 | }
44 | ```
45 |
46 | ### lazy(loader)
47 |
48 | 类似于 `React.lazy`，但不需要 `Suspense` 组件包裹，它暴露了 `load` 方法，调用时会加载目标组件，否则渲染 `props.fallback`，如果没有 fallback，则默认为 null。
49 |
50 | 任何时候调用 load，都会在加载组件后，更新所有当前活跃的相关 Lazy 组件。
51 |
52 | 配合 `ctrl.componentWillCreate` 和 `ctrl.viewWillHydrate`，可以实现支持 SSR 的异步组件。
53 |
54 | ```tsx
55 | import React from 'react'
56 | import { lazy } from 'react-imvc/hoc/lazy'
57 |
58 | const LazySidebar = lazy(() => import('./sidebar'))
59 |
60 | const View = () => {
61 | const handleClick = () => {
62 | // 加载完成后，自动刷新 LazySideBar
63 | LazySideBar.load()
64 | }
65 | return (
66 |
38 |
39 | {props.content}
40 |
41 |
67 |
68 | 占位
} />
69 |
70 | )
71 | }
72 |
73 | class Async extends Controller {
74 | View = View
75 | async componentWillCreate() {
76 | // SSR 时提前加载 LazySideBar
77 | await LazySideBar.load()
78 | }
79 |
80 | async viewWillHydrate() {
81 | // hydrate 前，提前加载 LazySideBar
82 | await LazySideBar.load()
83 | }
84 | }
85 | ```
86 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/doc/Isomorphic/persistence.md:
--------------------------------------------------------------------------------
1 | # 持久化
2 |
3 | ## Cookie
4 |
5 | 我们内置了一些管理 Cookie 的方法。
6 |
7 | ### getCookie
8 |
9 | 类型：
10 |
11 | ```ts
12 | (key: string, value: string, options?: Cookie.CookieAttributes | undefined) => void
13 | ```
14 |
15 | `ctrl.getCookie` 用以获取 cookie 里跟 `key` 参数对应的 `value` 值。第三个参数 `options` 为对象，可查看 [使用文档](https://github.com/js-cookie/js-cookie#cookie-attributes)。
16 |
17 | ### setCookie
18 |
19 | 类型：
20 |
21 | ```ts
22 | (key: string, value: string, options?: Cookie.CookieAttributes | undefined) => void
23 | ```
24 |
25 | `ctrl.setCookie` 用以设置 cookie 里跟 `key` 参数对应的 `value` 值。第三个参数 `options` 为对象，可查看 [使用文档](https://github.com/js-cookie/js-cookie#cookie-attributes)。
26 |
27 | ### removeCookie
28 |
29 | 类型：
30 |
31 | ```ts
32 | (key: string, options?: Cookie.CookieAttributes | undefined) => void
33 | ```
34 |
35 | `ctrl.removeCookie` 用以删除 cookie 里跟 `key` 参数对应的 `value` 值。第三个参数 `options` 为对象，可查看 [使用文档](https://github.com/js-cookie/js-cookie#cookie-attributes)。
36 |
37 | ### cookie
38 |
39 | 类型：
40 |
41 | ```ts
42 | ;(
43 | key: string,
44 | value?: string | undefined,
45 | options?: Cookie.CookieAttributes | undefined
46 | ) => any
47 | ```
48 |
49 | `ctrl.cookie` 方法是上述 `getCookie`、`setCookie` 方法的封装。
50 |
51 | - 当只有一个 `key` 参数时，内部调用 `getCookie` 方法。
52 |
53 | - 当有两个或两个以上的参数时，内部调用 `setCookie` 方法。
54 |
55 | ## LocalStorage
56 |
57 | [LocalStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage) 的管理则推荐使用 `localStorage.setItem`、`localStorage.getItem`、`localStorage.removeImte` 和 `localStorage.clear` 进行管理。
58 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/doc/Isomorphic/route.md:
--------------------------------------------------------------------------------
1 | # 路由
2 |
3 | React-IMVC 项目中的同构代码部分是以路由文件为入口，即默认 src 目录下的入口文件。并且采取配置路由的方式，格式如下：
4 |
5 | ```ts
6 | export default [
7 | {
8 | path: '/static_view',
9 | controller: () => import('./static-view/Controller'),
10 | },
11 | ]
12 | ```
13 |
14 | 为数组的形式，单个路由中 path 对应时页面地址匹配字符串，controller 则是对应页面的 Controller，采用异步引入的方式（用于 Webpack 进行 Code split）。其中我们对 path 的匹配工具为 [path-to-regexp](https://github.com/pillarjs/path-to-regexp)，所以关于路由匹配的相关规则请参照 [path-to-regexp](https://github.com/pillarjs/path-to-regexp) 的相关规则。
15 |
16 | 由于这样的路由形式，所以页面之间的渲染和数据管理都是独立的。下面我们会详细介绍单个页面的开发模式。
17 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/doc/Isomorphic/sass.md:
--------------------------------------------------------------------------------
1 | # 使用 Sass
2 |
3 | Sass 是一种 CSS 预处理器，它提供了一些便利的功能，使得 CSS 更容易编写和维护。
4 |
5 | ## 工作原理
6 |
7 | 一旦启用 sass 支持，`imvc` 将收集 `controller.tsx` 中依赖的所有 `css` 文件（包括 sass 和 css 文件），编译后拼接到 `controller.css/scss/sass` 中，并通过 `controller.preload` 机制加载和渲染。
8 |
9 | 所以，sass 的收集是一个 `build-time` 的新增功能，不会增加 `runtime` 的复杂度。
10 |
11 | 注意：只有文件名为`controller|Controller`作为入口文件的`controller.css`文件才会触发收集。
12 |
13 | ## 配置
14 |
15 | 在 `imvc.config.js` 中配置 `useSass` 选项：`true` 表示启用 Sass，`false` 表示禁用 Sass。
16 |
17 | ## 第一步：新增 controller.scss 文件
18 |
19 | 新增一个 `controller.scss` 文件，放在 `controller.tsx` 同级目录下。
20 |
21 | ## 第二步：在 controller.tsx 中引入 controller.scss
22 |
23 | 此处同样使用 `import` 语法引入 `controller.scss` 文件，并在 `preload` 中预加载。
24 |
25 | ```tsx
26 | import React from 'react'
27 | import Controller from 'react-imvc/controller'
28 | import controllerStyle from './controller.scss'
29 |
30 | export default class extends Controller {
31 | View = View
32 | preload = {
33 | controllerStyle,
34 | }
35 | }
36 |
37 | // 当组件渲染时，Style 标签会将 preload 里的同名 css 内容，展示为 style 标签。
38 | function View() {
39 | return (
40 |
41 |
42 |
43 | )
44 | }
45 | ```
46 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/doc/Isomorphic/serverRenderer.md:
--------------------------------------------------------------------------------
1 | # 自定义服务端渲染器
2 |
3 | react-imvc 支持在 `imvc.config.js` 中配置 `serverRenderer` 字段，来自定义服务端渲染器。
4 |
5 | 以 `styled-component` 的 SSR 为例：
6 |
7 | ```js
8 | const { renderToNodeStream, renderToString } = require('react-dom/server')
9 | const { ServerStyleSheet } = require('styled-components')
10 |
11 | const env = process.env.NODE_ENV
12 |
13 | // via renderToString
14 | const serverRenderer = (view) => {
15 | const sheet = new ServerStyleSheet()
16 | const html = renderToString(sheet.collectStyles(view))
17 | const styleTags = sheet.getStyleTags() // or sheet.getStyleElement();
18 | return styleTags + html
19 | }
20 |
21 | // via renderToNodeStream
22 | const streamingServerRenderer = (view) => {
23 | const sheet = new ServerStyleSheet()
24 | const jsx = sheet.collectStyles(view)
25 | const stream = sheet.interleaveWithNodeStream(renderToNodeStream(jsx))
26 | return stream
27 | }
28 |
29 | module.exports = {
30 | context: {
31 | env,
32 | },
33 | serverRenderer: streamingServerRenderer, // or serverRenderer
34 | }
35 | ```
36 |
--------------------------------------------------------------------------------
/packages/react-imvc-v3/doc/Isomorphic/static-file.md:
--------------------------------------------------------------------------------
1 | # 静态资源
2 |
3 | 处理数据的获取，我们还提供了静态资源的获取接口。
4 |
5 | ## 静态资源路由
6 |
7 | ## preload
8 |
9 | 我们在 Controller 中 提供了 `preload` 字段，类型为：
10 |
11 | ```ts
12 | Record
33 |