Hotifx: store is undefined in class component

examples/basic-store/src/pages/About/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Link, store as appStore  } from 'ice';
+import { Link, store as appStore } from 'ice';
 import { store as pageStore } from 'ice/About';
 
 const About = (props) => {

examples/basic-store/src/pages/Detail/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { store } from 'ice/Detail';
+
+class Detail extends React.Component {
+  constructor(props) {
+    super(props);
+    console.log(this.props);
+  }
+
+  public render() {
+    const { default: detailStore } = this.props as any;
+    const [state, dispatcher] = detailStore;
+    return (
+      <>
+        <div>Detail Page</div>
+        <div>Title: {state.title}</div>
+        <button onClick={() => dispatcher.updateDetailTitle('test')} type="button">Change Title</button>
+      </>
+    );
+  }
+}
+
+export default store.withModel('default')(Detail);

examples/basic-store/src/pages/Detail/model.ts

@@ -0,0 +1,26 @@
+const delay = (time) => new Promise((resolve) => setTimeout(() => resolve(), time));
+
+
+export default {
+  state: {
+    title: 'detail'
+  },
+
+  reducers: {
+    update(prevState, payload) {
+      return {
+        ...prevState,
+        ...payload,
+      };
+    },
+  },
+
+  effects: (dispatch) => ({
+    async updateDetailTitle(title: string) {
+      await delay(1000);
+      dispatch.default.update({
+        title
+      });
+    },
+  }),
+};

examples/basic-store/src/routes.ts

@@ -4,6 +4,7 @@
 import Layout from '@/layouts/index';
 import Home from '@/pages/Home';
 import About from '@/pages/About';
+import Detail from '@/pages/Detail';
 import { NotFound } from '@/pages/NotFound';
 import Index from '@/pages/Index';
 
@@ -25,6 +26,10 @@ export default [
         path: '/about',
         component: About
       },
+      {
+        path: '/detail',
+        component: Detail
+      },
       {
         path: '/index',
         component: Index

packages/plugin-store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "build-plugin-ice-store",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "builtin `icestore` in icejs",
   "author": "ice-admin@alibaba-inc.com",
   "homepage": "",

packages/plugin-store/src/generator.ts

@@ -146,7 +146,7 @@ export default class Generator {
     const pageComponentName = `Page${pageName}`;
     const pageComponentRenderData = {
       isRax: this.isRax,
-      pageComponentImport: `import ${pageComponentName} from '${pageComponentSourcePath}'` ,
+      pageComponentImport: `import ${pageComponentName} from '${pageComponentSourcePath}'`,
       pageComponentExport: pageComponentName,
       hasPageStore: false,
       pageStoreImport: existedStoreFile ? `import store from '${pageStoreFile}'` : 'import store from \'./store\''
@@ -156,12 +156,26 @@ export default class Generator {
       pageComponentRenderData.hasPageStore = true;
     }
 
-    this.renderFile(pageComponentTemplatePath, pageComponentTargetPath , pageComponentRenderData);
+    this.renderFile(pageComponentTemplatePath, pageComponentTargetPath, pageComponentRenderData);
+  }
+
+  private renderPageIndex(params) {
+    const { pageName, pageModelsDir, pageModelFile, existedStoreFile } = params;
+    const pageIndexTemplatePath = path.join(__dirname, './template/pageIndex.ts.ejs');
+    const pageComponentTargetPath = path.join(this.targetPath, 'pages', pageName, 'index.ts');
+
+    const existStore = fse.pathExistsSync(pageModelsDir) || fse.pathExistsSync(pageModelFile) || existedStoreFile;
+    const pageComponentRenderData = {
+      pageImports: existStore ? 'import store from \'./store\'' : '',
+      pageExports: existStore ? ' store ' : ''
+    };
+
+    this.renderFile(pageIndexTemplatePath, pageComponentTargetPath, pageComponentRenderData);
   }
 
   private renderFile(templatePath: string, targetPath: string, extraData = {}) {
     const templateContent = fse.readFileSync(templatePath, 'utf-8');
-    let content = ejs.render(templateContent, {...extraData});
+    let content = ejs.render(templateContent, { ...extraData });
     try {
       content = prettier.format(content, {
         parser: 'typescript',
@@ -199,6 +213,9 @@ export default class Generator {
 
       // generate .ice/pages/${pageName}/${pageName}.tsx
       this.renderPageComponent(params);
+
+      // generate .ice/pages/${pageName}/index.ts
+      this.renderPageIndex(params);
     });
   }
 }

packages/plugin-store/src/template/pageComponent.tsx.ejs

@@ -4,12 +4,13 @@
 <% } else { %>
   import * as React from 'react';
 <% } %>
-<%- pageComponentImport %>
 
 <% if(hasPageStore) { %>
   <%- pageStoreImport %>
 <% } %>
 
+<%- pageComponentImport %>
+
 const PageComponentName = <%= pageComponentExport %>;
 
 <% if(hasPageStore) { %>

packages/plugin-store/src/template/pageIndex.ts.ejs

@@ -0,0 +1,5 @@
+<%- pageImports %>
+
+export {
+<%= pageExports %>
+}