reactiumcore / reactium Goto Github PK

View Code? Open in Web Editor NEW

17.0 17.0 4.0 17.46 MB

A framework for creating production grade plugable React app.

Home Page: https://docs.reactium.io/

License: MIT License

JavaScript 73.12% HTML 3.22% Dockerfile 5.58% SCSS 18.09%

frontend-app plugable react-framework reactium reactjs

reactium's People

Contributors

Stargazers

Watchers

Forkers

apartyka brian-bacheller fengluandll jingyxpro

reactium's Issues

Ability to add to webpack entry list

Ran into a IE11 issue recently, which I believe was similar to facebook/react#8379.

I found that setting the react and reactDom load order (partially described in issue 8379) through the entry list resolved the IE11 error.

To do this, I added the following to the webpack override:

if (!Array.isArray(newWebpackConfig.entry.main)) {
    newWebpackConfig.entry.main = [
       'react',
       'react-dom',
       newWebpackConfig.entry.main
    ];
    console.log('webpack, entries - %o', newWebpackConfig.entry);
}

However, in order to get this to work, I also has to modify .core/index js to work with an existing arry in entry.main

if (Array.isArray(webpackConfig.entry.main)) {
     webpackConfig.entry.main.unshift( `webpack-hot-middleware/client?path=/__webpack_hmr&quiet=true`);
}
else {
    webpackConfig.entry.main = [
        `webpack-hot-middleware/client?path=/__webpack_hmr&quiet=true`,
        webpackConfig.entry.main,
     ];
}

Can something like that be added to allow array overrides in main.entry?

Rendering Top-Level component in SPA

Having a little trouble getting a top-level component to render in our SPA. Code is:

<body>
    <Component type="DevTools"></Component>
    <Component type="Config"></Component>
    <div id="router"></div>

but Config never seems to render. Any idea on what might be missing?

Optionally Package Styles with Webpack

It would be nice to be able to optionally load styles with Webpack by way of configuration.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet.
We recommend using:

CircleCI
Travis CI
Buildkite
CodeShip
Azure Pipelines
TeamCity
Buddy
AppVeyor
But Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Beautify Module is not IE11 compatible

beautify does not do its own transpilation (might only be a problem with css-beautify dependency), and therefore causes (perhaps among other things), a syntax error on arrow functions that are used.

Babel-loader does not transpile on behalf of node_modules (even if you do not exclude them from the loader). We'll need to:

select a different isomorphic module, pre-transpiled for IE11, or
fork beautify and/or CSS-beautify (or get them to PR in a babel process), or
Do beautification server-side (probably not gonna work for static toolkit)

"order" attribute in route causing production error

Issue

The "order" attribute in routes seems to be causing an issue in production builds. Under local dev, no issue is noticed. However under a static production build, the mount function of the target component is called, but the component itself is never loaded/mounted. No errors are reported in the console.

Reproduce

When publish with this route, ContentPage is never loaded:
{ path: '/pathtopage', order: 10, exact: true, component: ContentPage, load: params => deps.actions.ContentPage.mount(params), }

When publish with this route, ContentPage is loaded as expected:
{ path: '/pathtopage', exact: true, component: ContentPage, load: params => deps.actions.ContentPage.mount(params), }

Cannot init new full-stack project

When I try to execute the arcli project init command and create a new full-stack project (per the Getting Started guide), I see the following error:

> [email protected] postinstall c:\projects\style-guide\ADMIN\node_modules\react-jsx-parser
> npx patch-package

patch-package 6.4.7
Applying patches...
No patch files found

> @atomic-reactor/[email protected] postinstall c:\projects\style-guide\ADMIN\node_modules\@atomic-reactor\admin
> node ../patch-react-spring.js

internal/modules/cjs/loader.js:888
  throw err;
  ^

Error: Cannot find module 'c:\projects\style-guide\ADMIN\node_modules\@atomic-reactor\patch-react-spring.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @atomic-reactor/[email protected] postinstall: `node ../patch-react-spring.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @atomic-reactor/[email protected] postinstall script.

Node: 14.17.0
npm: 6.14.13
OS: Windows 10

Toolkit Path

Changing gulp asset path does not update toolkit asset path.

e.g. gulp.config.override.js:

config.dest.style = 'public/path/to/assets/style';

Maybe we can have an optional property in the toolkit manifest for the asset directory to serve in the toolkit?

Toolkit content styles not reloading on change

Since the toolkit content is loaded in an iframe, the changes to the style sheets aren't propagating and causing a reload even though BrowserSync is calling the bs.stream() function.

Proposed fix: create a /toolkit/:preview route that loads only the component and use that as the toolkit content iframe source.

add package version to env variables

Since we can't override webpack config, could the package version be added to defined env variables?

Something like:

if (type === 'app') {
        config.defines['process.env'] = {
			NODE_ENV: JSON.stringify(env),
			VERSION: JSON.stringify(require('../package.json').version)
        };
}

So we can read and display current package version number.

Feature: Local Development - Auto Port

When running multiple copies of Reactium at the same time, by default the express and browsersync ports will conflict.

When in local development, detect the availability of ports and make an adjustment on the fly during startup if they are not available.