generator-jive-react-addon

#generator-jive-react-addon

Use this yeoman generator for scaffolding a react-based jive tile

##What it does It runs jive-sdk native scaffolder, then applies a series of modifications:

1. Applies gulp/webpack/babel/react toolchain, including:
   1. Compilation of JS and CSS/SCSS sources
   2. Processing fonts and images
   3. Optimizing code for production or development (minification, source maps, etc)
   4. Optional hot module replacement (HMR), if you intend to use local jive instance (not in IE!)
   5. Analysis of the modules sizes in the resulting bundle
   6. Generation of verbosely named add-on packages in deployment-ready .zip archives
2. Creates ./src/{tileName} folder with:
   1. Entry point files with react renderer
   2. Basic react components for view and configuration
   3. HTML templates
   4. Helper functions for data management and iframe resizing
   5. Schema revision tools
3. Deletes unused files
4. Adds a proper .gitignore
5. Adds .npmrc file, which configures npm to save dependencies in a most error-resistant way and warn you if your npm/node version is low
6. Replaces jive-sdk configuration files with single simplified YAML file (1)
7. Prevents scripts and CSS caching between builds
8. Applies npm package.json "version" value to the project in various ways
9. Calculates a build stamp - a checksum that only changes when actual code is modified (2)
10. Automatically applies production/development middleware URL in case the tile requires it
11. Installs latest versions of npm dependencies and fixates them

Footnotes:

1. More complex options are backed up in ./src/meta.yaml and ./src/{tileName}/meta.yaml
2. All build stamps with detailed file lists are saved under ./logs/buildstamps directory in case thorough comparison is needed. Logs are not versioned

Prerequisites

Stuff you'll need to use it:

• node.js v8.12.0 or later
• npm v6.4.1 or later
• Globally installed npm packages:
  • yo
  • jive-sdk
  • gulp v4

You can install them all using [sudo] npm install -g yo jive-sdk gulp@4

Installation

Install it as a regular npm global package: [sudo] npm install -g generator-jive-react-addon. To update, just run installation command again.

Using generator

Creating jive tile

1. Go to the folder of your choice (this may be your recently cloned empty git repository)
2. Run yo jive-react-addon:tile --force. The flag --force is required because the generator will overwrite a lot of files created by initial jive-sdk scaffold.
3. Answer prompting questions: tile system name, display name, description, etc
4. Answer do you want to use HMR and/or middlewares and the following questions
5. Wait for the successful completion of the script (it should say "TILE CREATED!")

Adding a middleware option to an existing tile

1. Go to the tile folder
2. Run yo jive-react-addon:add-mw --force
3. Fill in the asked details
4. Wait for a script to say "MIDDLEWARE SETTINGS APPLIED!"

Attention!

• This will overwrite your ./src/gulpfile.js file.

Building a tile

This generator creates several standard npm commands to use with npm run:

• build-prod - builds a .zip package optimized for production. This script requires you to commit and push all changes. Also, the project should not have untracked files, they have to be either added to versioning or to .gitignore. In other words, it only allows you to build production version if the git status output is "nothing to commit, working tree clean".
• build-dev - builds a .zip package optimized for development.
• local-dev-watch run in development mode with changes watcher turned on to develop tile using local jive intsance.
• local-dev-hot (optional) run webpack-dev-server to develop tile using local jive intsance.

Additional configuration

This generator creates 3 config files: config.yaml, config-local.yaml and config-local.template.yaml. The config-local.yaml file is added to .gitignore, which means each developer has to have their own version of this file - copied from the config-local.template.yaml and properly edited.
config-local.yaml file contains data specific to environment and/or developer, such as local jive instance path, testing middleware etc.

Changelog

1.0.0

Major:

1. Generator now tells it's own version on startup
2. Applied SCSS and preprocessors

Minor:

1. Added setStateAsync function
2. Added forced CSS-renderer accelerator for iOS

Bugfixes:

1. Fixed bug: hot loader was not honoring configuration value
2. Added missing immutability-helper import

0.15.0

Major:

1. Added ignoreExtensionRegistrationSource and suppressAddonRegistration manipulations
2. Added vendor-based code-splitting
3. Added .nvmrc (node 8.12.0) and changed requirements to npm (6.4.1)
4. Added iframe-hack ("DomActions")
5. Changed the way fonts are loaded (no more need for "FontsLoader", so it's deleted)
6. No more need to put tile name in build scripts. Preparations for multi-tile addons support
7. Now polyfilling browser versions that have 0.5 share or more

Minor:

1. Added Mediator.js
2. Added frame reload on ctrl+alt+click or cmd+opt+click (only works in dev mode)
3. Added temporary solution for "includes" and IE (for anrom-jive-app-tools)
4. Switched to anrom-jive-app-tools 0.8 beta. Switched dataUtils helper to usage of the library.
5. createCommand now supports command w/o params
6. Warns user to not use _ in tile name (causes jive-sdk error)

0.14.0

Major:

1. Moved to babel v7
2. Polyfills are now automatically added on their usage
3. Polyfills are now based on browserslist (.browserlistrc file)
4. Applied optional chaining proposal: foo?.bar?.baz. No more "unable to call property X of undefined"
5. Babel discontinued "stage-x" presets, so moved to proper proposal plugins

Minor:

1. Regenerator injection is now applied on babel build
2. Built distributives are now stored in ./dist directory

0.13.3

Fixed critical breaking change in regenerator-runtime

0.13.1, 0.13.2

Updated README according to 0.13.0 changes, dealt with bitbucket/npm markdown differences

0.13.0

Major:

1. Added this readme
2. jiveclientconfiguration.json and definition.json files are added to .gitignore and are dynamically generated on build based on data from ./config.yaml, ./src/meta.yaml and ./src/{tileName}/meta.yaml. In this way configuration is made simpler, also build stamp is no longer changed on change of prod/dev middleware
3. .zip files are now ignored by git by default Minor:
4. Production middleware URL is now taken from ./config.yaml, not ./config-local.yaml
5. Now using version (including buildstamp) for anti-caching instead of date+time Bugfixes:
6. Stripping console.log was incorrect, it was stripping all console output. Now works as planned

0.12.0

Major:

1. Now generator features the refactored config schema revisioning tool. This also includes revisioning-friendly function "loadConfigFromString" in configuration for usage in MigrationConfig component of se-components-config

Minor:

2. When using local HMR version in the console is being appended with "-hot". This should explain why there's no buildstamp on HMR.

0.11.0

1. Now using YAML config file for local/personal data (jive instance local path, middleware URLs etc). In this way we also avoid very long gulp and webpack CLI strings.
2. Now you can run yo jive-react-addon:add-hot and yo jive-react-addon:add-mw separately to turn on HMR or middlewares accordingly.
3. Now you can run gulp with --force flag that allows to skip git commit verification before production build. Not recommended, use with caution!

0.10.0

Major:

1. Jive-SDK command is now included in the generator (no need to run jive-sdk create tile-app-internal --name="{tile-name} before it). Now generator prompts for the tile sysnem name.
2. Now prompts for usage of middleware and if the answer is yes - for MW URLs and registration endpoints
3. Now prompts for usage of HMR and if "yes" - for local jive instance path and optional HMR server URL
4. Default build scripts are renamed according to our new task-naming policy (build-prod, build-dev, local-dev-hot)
5. Now defines the minimal versions of node (8.11.4) and npm (5.6) needed for a successful build
6. Now properly places default packages in "dependencies" and "devDependencies" depending on whether or not the package is about to be included in a resulting bundle
7. Applied build-stamping. Build-stamp is only depends on the essential project files and should be the same for the similar project on any location. Also creates logs in ./logs/buildstamps
8. Now console.log usage is stripped from production builds. console.info, console.warn and console.error are still available
9. Now places tile's information in console. This includes the name of the tile, it's version (including build-stamp), git commit and branch and git user who build it. Also shows if all changes were submitted to git at the moment of build
10. Now builds development package with version and "-dev" in name

Minor:

1. Abandoned webpack v1 usage. Now it's always webpack v3 by default. Previously used flags for webpack 1/2 ('-w1', '-w') will not work anymore!
2. Moved build complex scripts to ./build-scripts folder. Made build scripts modular
3. Switched to gulp v4. Now all scripts are running in strict order by using async and callbacks
4. Applied usage of arguments in webpack and gulp. Now such variables as tile name, local jive path, middleware URL etc are only defined once in package.json as a command line arguments for gulp and then used throughout the entire project
5. Now checks if node and npm is installed and crashes to a proper error if not

Bugfixes:

1. Upgraded uglifier version (moment.js locale bug)
2. Fixed the work of git prompting and information collection