{"action":"created","issue":{"url":"https://api.github.com/repos/choojs/choo/issues/622","repository_url":"https://api.github.com/repos/choojs/choo","labels_url":"https://api.github.com/repos/choojs/choo/issues/622/labels{/name}","comments_url":"https://api.github.com/repos/choojs/choo/issues/622/comments","events_url":"https://api.github.com/repos/choojs/choo/issues/622/events","html_url":"https://github.com/choojs/choo/issues/622","id":293211084,"number":622,"title":"Code splitting and Es module dynamic import","user":{"login":"ansarizafar","id":5788284,"avatar_url":"https://avatars1.githubusercontent.com/u/5788284?v=4","gravatar_id":"","url":"https://api.github.com/users/ansarizafar","html_url":"https://github.com/ansarizafar","followers_url":"https://api.github.com/users/ansarizafar/followers","following_url":"https://api.github.com/users/ansarizafar/following{/other_user}","gists_url":"https://api.github.com/users/ansarizafar/gists{/gist_id}","starred_url":"https://api.github.com/users/ansarizafar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ansarizafar/subscriptions","organizations_url":"https://api.github.com/users/ansarizafar/orgs","repos_url":"https://api.github.com/users/ansarizafar/repos","events_url":"https://api.github.com/users/ansarizafar/events{/privacy}","received_events_url":"https://api.github.com/users/ansarizafar/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-01-31T15:56:16Z","updated_at":"2018-02-01T23:57:10Z","closed_at":null,"author_association":"NONE","body":"Is there any plan to support code splitting and Es module dynamic import."},"comment":{"url":"https://api.github.com/repos/choojs/choo/issues/comments/362441599","html_url":"https://github.com/choojs/choo/issues/622#issuecomment-362441599","issue_url":"https://api.github.com/repos/choojs/choo/issues/622","id":362441599,"user":{"login":"marcbachmann","id":431376,"avatar_url":"https://avatars3.githubusercontent.com/u/431376?v=4","gravatar_id":"","url":"https://api.github.com/users/marcbachmann","html_url":"https://github.com/marcbachmann","followers_url":"https://api.github.com/users/marcbachmann/followers","following_url":"https://api.github.com/users/marcbachmann/following{/other_user}","gists_url":"https://api.github.com/users/marcbachmann/gists{/gist_id}","starred_url":"https://api.github.com/users/marcbachmann/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/marcbachmann/subscriptions","organizations_url":"https://api.github.com/users/marcbachmann/orgs","repos_url":"https://api.github.com/users/marcbachmann/repos","events_url":"https://api.github.com/users/marcbachmann/events{/privacy}","received_events_url":"https://api.github.com/users/marcbachmann/received_events","type":"User","site_admin":false},"created_at":"2018-02-01T23:57:10Z","updated_at":"2018-02-01T23:57:10Z","author_association":"CONTRIBUTOR","body":"Thanks for bringing that up. I've also experimented a bit and I'm in interested in that.\r\nHere's some code extracted from my prototype. Sadly I was only able to get it to run using webpack.\r\nI wasn't able to get the imports running in bankai/browserify. Bankai just throws weird errors.\r\n\r\n```bash\r\nnpm init -y\r\nnpm install --save-dev babel-core choo-devtools babel-plugin-syntax-dynamic-import\r\n```\r\n\r\n```json\r\n// .babelrc\r\n{\r\n  \"plugins\": [\"syntax-dynamic-import\"]\r\n}\r\n```\r\n\r\n```js\r\n// index.js\r\nconst choo = require('choo')\r\nconst html = require('choo/html')\r\nconst app = choo()\r\n\r\nif (typeof window !== 'undefined') window.app = app\r\napp.use(require('choo-devtools')())\r\napp.route('/', (state, emit) => html`<body>root</body>`)\r\napp.route('/some-route', (state, emit) => html`<body>some-route</body>`)\r\n\r\nsubapp(app, {\r\n  path: '/subroute',\r\n  getModule () { return import('./subroute') }\r\n})\r\n\r\napp.mount('body')\r\n\r\nfunction subapp (app, {path, getModule}) {\r\n  const subApp = {\r\n    isLoaded: false,\r\n    isLoading: false,\r\n    loadingView: (state, emit) => html`<body>Loading...</body>`,\r\n    indexView: (state, emit) => html`<body>${path} App: Not Found</body>`,\r\n    fallbackView: (state, emit) => html`<body>${path} App: Not Found</body>`\r\n  }\r\n\r\n  app.route(path, loadSubApp)\r\n  app.route(path + '/*', loadSubApp)\r\n\r\n  function loadSubApp (state, emit) {\r\n    if (subApp.isLoaded && state.href === path) return subApp.indexView(state, emit)\r\n    else if (subApp.isLoaded) return subApp.fallbackView(state, emit)\r\n    if (subApp.isLoading) return subApp.loadingView(state, emit)\r\n\r\n    subApp.isLoading = true\r\n    getModule().then(function (subAppModule) {\r\n      subApp.isLoading = false\r\n      subApp.isLoaded = true\r\n      subAppModule({\r\n        use: app.use.bind(app),\r\n        state: app.state,\r\n        route (route, handler) {\r\n          if (/^[/]?$/.test(route)) {\r\n            subApp.indexView = handler\r\n            return\r\n          } else if (route === '/*') {\r\n            subApp.fallbackView = handler\r\n            return\r\n          }\r\n          app.route(`${path}${route}`, handler)\r\n        }\r\n      })\r\n      emit('replaceState', state.href)\r\n    })\r\n\r\n    return subApp.loadingView(state, emit)\r\n  }\r\n}\r\n```\r\n\r\n```js\r\n// subroute.js\r\nconst html = require('choo/html')\r\n\r\nmodule.exports = function (choo) {\r\n  choo.route('/something-else', (state, emit) => html`<body>something else</body>`)\r\n  choo.route('/*', (state, emit) => html`<body>subroute wildcard</body>`)\r\n}\r\n```\r\n\r\nSorry if this doesn't work right away, I've just extracted it without an additional test.\r\nThis could use some iterations and some cleanup/simplification.\r\nIt already works in almost all cases; there's only one small glitch with a view sometimes."}}
{"actor":{"display_login":"marcbachmann"}}