Release/0.13.10 (#104)

* Bump decompress from 4.0.0 to 4.2.1 (#94)

Bumps [decompress](https://github.com/kevva/decompress) from 4.0.0 to 4.2.1.
- [Release notes](https://github.com/kevva/decompress/releases)
- [Commits](kevva/decompress@v4.0.0...v4.2.1)

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* SEEXT-8959 Update cli settings page template

* Update settings page templates

* Switch to preinstall

* Remove excess translation, adjust developer name source

* Cleanup and add developer to context when creating page

* Resolve translation and style issues

* Fix dependencies and use PureComponent

* Clean up imports

* Fix package.json and use prepare instead of preinstall

* Rename extension-page to shortcut-page in shortcut template

* Version bump, switch to preinstall for testing

* Replace Component with PureComponent

* Feature/remove en json and add messaging and example (#103)

* Add examples and remove en.json

* Adjust messaging for page add

* Add missing 'and'

* Switch to prepare

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/cli",
-  "version": "0.13.9",
+  "version": "0.13.10",
   "description": "Command-line tools for Shoutem applications",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
     "colors": "1.1.2",
     "command-exists": "~1.2.4",
     "decamelize": "^1.2.0",
-    "decompress": "4.0.0",
+    "decompress": "4.2.1",
     "diff": "^3.3.1",
     "download-cached": "1.0.8",
     "download-file": "latest",

src/cli/page/add.js

@@ -1,8 +1,9 @@
+import { ensureUserIsLoggedIn } from '../../commands/login';
 import { executeAndHandleError } from '../../services/error-handler';
-import {ensureInExtensionDir, loadExtensionJson} from '../../services/extension';
-import {askPageCreationQuestions} from "../../services/page";
-import {instantiateExtensionTemplate} from "../../services/extension-template";
-import {offerChanges} from "../../services/diff";
+import { ensureInExtensionDir, loadExtensionJson } from '../../services/extension';
+import { askPageCreationQuestions } from '../../services/page';
+import { instantiateExtensionTemplate } from '../../services/extension-template';
+import { offerChanges } from '../../services/diff';
 
 export const description = 'Adds a settings page to the current extension.';
 export const command = 'add [name]';
@@ -14,7 +15,9 @@ export const handler = args => executeAndHandleError(async () => {
 });
 
 export async function createPage(opts, extensionPath) {
-  const changes = await instantiateExtensionTemplate('settings-page', { ...opts, extensionPath });
+  const developer = await ensureUserIsLoggedIn();
+  const changes = await instantiateExtensionTemplate('settings-page', { ...opts, extensionPath, developer });
   await offerChanges(changes);
   console.log('Success'.green.bold);
+  console.log('Remember to create \'server/translations/en.json\' and add your translation strings to it.\nYou can use \'server/translations/example.json\' to check the format.');
 }

src/commands/init.js

@@ -1,17 +1,16 @@
 import _ from 'lodash';
 import inquirer from 'inquirer';
 import decamelize from 'decamelize';
-import { pathExists } from 'fs-extra';
+import fs from 'fs-extra';
 import path from 'path';
 import semver from 'semver';
-import { ensureUserIsLoggedIn } from '../commands/login';
 import msg from '../user_messages';
 import { getPlatforms } from '../clients/extension-manager';
 import * as utils from '../services/extension';
-import {instantiateExtensionTemplate} from "../services/extension-template";
-import {offerChanges} from "../services/diff";
-import {stringify} from "../services/data";
-
+import { instantiateExtensionTemplate } from '../services/extension-template';
+import { offerChanges } from '../services/diff';
+import { stringify } from '../services/data';
+import { ensureUserIsLoggedIn } from './login';
 
 function generateNoPatchSemver(version) {
   const [a, b] = version.split('.');
@@ -54,7 +53,7 @@ export async function initExtension(extName, extensionPath = process.cwd()) {
   utils.getExtensionCanonicalName(developer.name, extJson.name, extJson.version);
 
   const dirname = `${developer.name}.${extJson.name}`;
-  if (await pathExists(path.join(process.cwd(), dirname))) {
+  if (fs.existsSync(path.join(process.cwd(), dirname))) {
     throw new Error(`Folder ${dirname} already exists.`);
   }
 

src/services/extension-template.js

@@ -1,5 +1,5 @@
-import {loadExtensionJson} from "./extension";
-import * as template from "./template";
+import { loadExtensionJson } from './extension';
+import * as template from './template';
 
 export async function instantiateExtensionTemplate(localTemplatePath, context, opts) {
   if (!context.extJson && context.extensionPath) {
@@ -11,5 +11,6 @@ export async function instantiateExtensionTemplate(localTemplatePath, context, o
   }
 
   await template.instantiateTemplatePath(localTemplatePath, context.extensionPath, context, opts);
+
   return await template.instantiateTemplatePath('extension-js', context.extensionPath, context, opts);
 }

src/services/page.js

@@ -1,8 +1,8 @@
 import _ from 'lodash';
-import decamelize from "decamelize";
-import { prompt } from "inquirer";
-import {isVariableName} from "./cli-parsing";
-import { askScreenCreationQuestions } from "./screen";
+import decamelize from 'decamelize';
+import { prompt } from 'inquirer';
+import { isVariableName } from './cli-parsing';
+import { askScreenCreationQuestions } from './screen';
 
 function validatePageName(name, existingPages) {
   if (!isVariableName(name)) {

src/services/template.js

@@ -1,15 +1,15 @@
-import getOrSet from 'lodash-get-or-set';
 import Promise from 'bluebird';
 import fs from 'fs-extra';
-import path from 'path';
+import getOrSet from 'lodash-get-or-set';
 import Mustache from 'mustache';
-import { pathExists } from 'fs-extra';
+import path from 'path';
 
 const templatesDirectory = path.join(__dirname, '../..', 'src/templates');
 
 export function load(pathWithSlashes, templateContext) {
   const p = path.join(templatesDirectory, ...pathWithSlashes.split('/'));
   const template = fs.readFileSync(p, 'utf8');
+
   return Mustache.render(template, templateContext);
 }
 
@@ -28,6 +28,7 @@ async function instantiateTemplatePathRec(localTemplatePath, destinationPath, co
     await Promise.map(files, file => {
       const src = path.join(localTemplatePath, file);
       const dest = path.join(destinationPath, file);
+
       return instantiateTemplatePathRec(src, dest, context, opts);
     });
   } else if (templatePathState.isFile()) {

src/templates/extension-js/template-init.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import decamelize from 'decamelize';
-import {isReactPage} from "../settings-page-react/template-init";
+import {isReactPage} from '../settings-page-react/template-init';
 
 function importStatements(names, path, directoriesNames = names) {
   return names.map((name, i) => `import ${name} from '${path}/${directoriesNames[i]}';`).join('\n');

src/templates/settings-page-html-extension/server/pages/{{pageDirectoryName}}/index.js

@@ -11,7 +11,6 @@ function onShoutemReady(event) {
   $(document).ready(function() {
     shoutem.api.init(config.context);
     onPageReady(config);
-
   });
 };
 

src/templates/settings-page-html/template-init.js

@@ -1,7 +1,7 @@
+import decamelize from 'decamelize';
 import _ from 'lodash';
 import getOrSet from 'lodash-get-or-set';
-import {instantiateExtensionTemplate} from "../../services/extension-template";
-import decamelize from 'decamelize';
+import { instantiateExtensionTemplate } from '../../services/extension-template';
 
 function isHtmlPage({ type, path }) {
    return type === 'html' && !_.includes(path, 'server/build');
@@ -12,7 +12,7 @@ export async function before(context) {
   const pages = getOrSet(extJson, 'pages', []);
 
   if (!_.every(pages, isHtmlPage)) {
-    throw new Error("Html pages can't be mixed with non-html settings pages in the same extension");
+    throw new Error('Html pages can\'t be mixed with non-html settings pages in the same extension');
   }
 
   if (_.find(pages, { name })) {

src/templates/settings-page-react-bin/server/bin/localization/LocalizationProvider.js

@@ -0,0 +1,108 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import i18next from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { LoaderContainer } from '@shoutem/react-web-ui';
+import translation from '../../translations/en.json';
+
+export class LocalizationProvider extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.handleInjection = this.handleInjection.bind(this);
+
+    this.state = {
+      inProgress: true,
+    };
+  }
+
+  componentDidMount() {
+    const { ownExtensionName, locale, translationUrl } = this.props;
+    const dictionary = _.get(translation, ownExtensionName);
+
+    i18next.use(initReactI18next).init({
+      lng: 'en',
+      fallbackLng: 'en',
+      ns: [ownExtensionName],
+      defaultNS: ownExtensionName,
+      nsSeparator: false,
+      keySeparator: false,
+      resources: {
+        en: {
+          [ownExtensionName]: dictionary,
+        },
+      },
+    });
+
+    this.handleInjection(locale, translationUrl);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const {
+      locale: nextLocale,
+      translationUrl: nextTranslationUrl,
+    } = nextProps;
+    const { locale, translationUrl } = this.props;
+
+    if (translationUrl !== nextTranslationUrl || nextLocale !== locale) {
+      this.handleInjection(nextLocale, nextTranslationUrl);
+    }
+  }
+
+  async handleInjection(locale, translationUrl) {
+    const { ownExtensionName } = this.props;
+
+    if (translationUrl) {
+      try {
+        const response = await fetch(translationUrl);
+        const translation = await response.json();
+        const dictionary = _.get(translation, ownExtensionName);
+
+        if (dictionary) {
+          await i18next.addResourceBundle(locale, ownExtensionName, dictionary);
+          await i18next.changeLanguage(locale);
+        }
+      } catch (error) {
+        // do nothing
+      }
+    }
+
+    this.setState({ inProgress: false });
+  }
+
+  render() {
+    const { children } = this.props;
+    const { inProgress } = this.state;
+
+    if (inProgress) {
+      return <LoaderContainer size="50px" isLoading />;
+    }
+
+    return children;
+  }
+}
+
+LocalizationProvider.propTypes = {
+  children: PropTypes.node,
+  ownExtensionName: PropTypes.string,
+  locale: PropTypes.string,
+  translationUrl: PropTypes.string,
+};
+
+function mapStateToProps(state, ownProps) {
+  const { context } = ownProps;
+
+  const ownExtensionName = _.get(context, 'ownExtensionName');
+  const locale = _.get(context, 'i18n.locale');
+  const translationUrl = _.get(context, 'i18n.translationUrl');
+
+  return {
+    ownExtensionName,
+    locale,
+    translationUrl,
+  };
+}
+
+export default connect(mapStateToProps)(LocalizationProvider);

src/templates/settings-page-react-bin/server/bin/localization/index.js

@@ -0,0 +1 @@
+export { default as LocalizationProvider } from './LocalizationProvider';

src/templates/settings-page-react-bin/server/bin/main.js

@@ -1,8 +1,7 @@
-require('es6-promise').polyfill();
 import 'fetch-everywhere';
-
 import '@shoutem/react-web-ui/lib/styles/index.scss';
 import '@shoutem/extension-sandbox';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
@@ -14,8 +13,10 @@ import { RioStateSerializer } from '@shoutem/redux-io';
 import { SyncStateEngine } from '@shoutem/redux-sync-state-engine';
 import * as extension from '../src/index';
 import { PageProvider, connectPage, Page } from './page';
+import { LocalizationProvider } from './localization';
 import { SyncStateEngineProvider } from './syncStateEngine';
 import configureStore from './configureStore';
+require('es6-promise').polyfill();
 
 const uri = new URI(window.location.href);
 const pageName = _.get(uri.search(true), 'page', '');
@@ -24,13 +25,12 @@ const rioStateSerializer = new RioStateSerializer();
 
 function renderPage() {
   if (!PageComponent) {
-    return (
-      <div>Page not found: {pageName}</div>
-    );
+    return <div>Page not found: {pageName}</div>;
   }
 
   const ConnectedPageComponent = connectPage()(PageComponent);
-  return (<ConnectedPageComponent />);
+
+  return <ConnectedPageComponent />;
 }
 
 // handler for Shoutem initialization finished
@@ -60,12 +60,12 @@ function onShoutemReady(event) {
   ReactDOM.render(
     <Provider store={store}>
       <SyncStateEngineProvider syncStateEngine={syncStateEngine}>
-        <PageProvider page={page}>
-          {renderPage()}
-        </PageProvider>
+        <LocalizationProvider context={context}>
+          <PageProvider page={page}>{renderPage()}</PageProvider>
+        </LocalizationProvider>
       </SyncStateEngineProvider>
     </Provider>,
-    document.getElementById('root')
+    document.getElementById('root'),
   );
 }
 
@@ -75,7 +75,5 @@ document.addEventListener('shoutemready', onShoutemReady, false);
 // Render it to DOM
 ReactDOM.render(
   <LoaderContainer size="50px" isLoading />,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
-
-

src/templates/settings-page-react-bin/server/bin/page/Page.js

@@ -2,7 +2,6 @@ import { ext } from '../../src/const';
 
 export default class Page {
   constructor(context, parameters) {
-
     this.pageContext = {
       ownExtensionName: ext(),
       ...context,

src/templates/settings-page-react-bin/server/bin/page/PageProvider.js

@@ -1,8 +1,10 @@
-import React, { PropTypes, Component, Children } from 'react';
+import { PureComponent, Children } from 'react';
+import PropTypes from 'prop-types';
 
-export default class PageProvider extends Component {
+export default class PageProvider extends PureComponent {
   getChildContext() {
     const { page } = this.props;
+
     return { page };
   }
 
@@ -14,10 +16,10 @@ export default class PageProvider extends Component {
 }
 
 PageProvider.propTypes = {
-  page: React.PropTypes.object,
+  page: PropTypes.object,
   children: PropTypes.node,
 };
 
 PageProvider.childContextTypes = {
-  page: React.PropTypes.object,
+  page: PropTypes.object,
 };