Add a demo page, refactor entire application

Repository details (talkie)
Project page
talkie
Project log category
(588 entries)
Repository
@joelpurra/talkie
Owner
@joelpurra
Contributors
Contributors on Github
Project status
⏲️ This project has had recent commits.
📂 This project is open.
🌠 This project is popular.
Repository activity period
🗓
Commits
630 commits
Stars
61 stars
Commit details (f1be9a39)
Author
Authored at
Committer
Joel Purra
Committed at

Commit message

Add a demo page, refactor entire application

  • A demo page would be useful to show the capabilities of Talkie.
  • The demo page should reuse as much functionality as possible from other parts of the application.

React

  • Previously, only the options page used react.js.
  • A full refactor of the react-based page and component system was needed.
  • Now the main html pages (demo, options, popup) uses the same, shared react base.

Prerendering

  • To speed up rendering, especially of the popup, isomorphic page rendering (demo, options popup) has been introduced.
  • The browsers initially shows a pre-rendered "react server version" of each page, then hydrates react it after the initial load.
  • Due to the translation greatly affecting the perceived render speed, each page (3) is rendered per locale (27) per extension package (4). The total number of pre-rendered pages is currently 324.

Isomorphic classes

  • To enable isomorphic rendering, both node versions and browser versions of certain critical classes have been introduced.
  • The isomorphic split is handled by [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace) and the string SPLIT_ENVIRONMENT in import statement paths.

Styling

Further work

  • Clean up the exposed background api; not all functions are in use.
  • Remove other dead code.
  • Clean up the code tree directory/file structure a bit.
Raw text
Add a demo page, refactor entire application

- A demo page would be useful to show the capabilities of Talkie.
- The demo page should reuse as much functionality as possible from other parts of the application.

React

- Previously, only the options page used react.js.
- A full refactor of the react-based page and component system was needed.
- Now the main html pages (demo, options, popup) uses the same, shared react base.

Prerendering

- To speed up rendering, especially of the popup, isomorphic page rendering (demo, options popup) has been introduced.
- The browsers initially shows a pre-rendered "react server version" of each page, then hydrates react it after the initial load.
- Due to the translation greatly affecting the perceived render speed, each page (3) is rendered per locale (27) per extension package (4). The total number of pre-rendered pages is currently 324.

Isomorphic classes

- To enable isomorphic rendering, both node versions and browser versions of certain critical classes have been introduced.
- The isomorphic split is handled by [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace) and the string `SPLIT_ENVIRONMENT` in `import` statement paths.

Styling

- Moving away from CSS files towards CSS-in-JS.
- Using [styletron](http://styletron.js.org/) to enable atomic, shared CSS classes to be applied to elements.
- Critical CSS is pre-rendered on each page.
- The remaining CSS files contain:
  - In-browser [predefined messages](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Internationalization#Predefined_messages) enabling [locale dependent CSS](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Internationalization#Calling_message_strings_from_manifests_and_extension_CSS). Used for right-to-left support.
  - SVG icons as `data:` URLs, as they are relatively large blobs.

Further work

- Clean up the exposed background api; not all functions are in use.
- Remove other dead code.
- Clean up the code tree directory/file structure a bit.

Changed files (192)

Path Additions Deletions
.editorconfig +1 -1
extension-files.txt +4 -0
manifest.json +2 -2
package-lock.json +3183 -480
package.json +26 -18
render.html.js +34 -0
render.html.sh +41 -0
resources/style/demo.css +19 -0
resources/style/options.css +5 -134
resources/style/popup.css +3 -68
resources/style/shared.css +6 -209
rollup.config.background.js +16 -5
rollup.config.demo.html.js +33 -0
rollup.config.demo.js +33 -0
rollup.config.extension-translator.js +7 -5
rollup.config.license.js +1 -1
rollup.config.options.html.js +33 -0
rollup.config.options.js +8 -6
rollup.config.popup.html.js +33 -0
rollup.config.popup.js +12 -15
rollup.config.react.browser.js +100 -0
rollup.config.react.js +1 -68
rollup.config.react.node.js +104 -0
rollup.config.stay-alive.js +16 -5
src/background/background.js +22 -15
src/background/button-popup-manager.js +6 -4
src/background/context-menu-manager.js +7 -6
src/background/language-helper.js +6 -5
src/background/read-clipboard-manager.js +6 -5
src/background/suspension-manager.js +5 -2
src/background/talkie-background.js +6 -4
src/demo/actions/index.js +25 -0
src/demo/components/footer.jsx +82 -0
src/demo/components/header.jsx +69 -0
src/demo/components/main.jsx +155 -0
src/demo/containers/app.jsx +118 -0
src/demo/demo.html +34 -0
src/demo/demo.html.js +32 -0
src/demo/demo.js +52 -0
src/demo/demo.template.html +41 -0
src/demo/load-root.jsx +34 -0
src/demo/reducers/index.js +29 -0
src/frontend/locale-redirect.js +31 -0
src/frontend/shared-frontend.js +8 -340
src/options/actions/index.js +2 -6
src/options/actions/navigation.js +0 -6
src/options/components/main.jsx +113 -65
src/options/components/navigation/nav.jsx +76 -28
src/options/components/navigation/tab-contents.jsx +6 -20
src/options/components/range/logarithmic-scale-range.jsx +1 -1
src/options/components/range/scale-range.jsx +5 -3
src/options/components/sections/about.jsx +113 -51
src/options/components/sections/features.jsx +127 -46
src/options/components/sections/usage.jsx +192 -145
src/options/components/sections/voices.jsx +84 -80
src/options/components/sections/voices/available-languages.jsx +14 -8
src/options/components/sections/voices/available-voices.jsx +24 -11
src/options/components/sections/voices/range-with-heading.jsx +14 -12
src/options/components/sections/voices/sample-text.jsx +19 -14
src/options/components/sections/voices/speak-long-texts.jsx +46 -30
src/options/components/sections/voices/toggle-default.jsx +19 -13
src/options/containers/about-container.jsx +11 -4
src/options/containers/app.jsx +25 -36
src/options/containers/nav-container.jsx +8 -5
src/options/containers/voices-container.jsx +15 -14
src/options/load-root.jsx +9 -18
src/options/options.html +32 -37
src/options/options.html.js +32 -0
src/options/options.js +2 -0
src/options/options.template.html +41 -0
src/options/reducers/index.js +2 -5
src/options/reducers/navigation.js +1 -1
src/options/utils/api.js +0 -102
src/options/utils/synchronous-configuration.js +0 -98
src/popup/actions/index.js +27 -0
src/popup/actions/navigation.js +31 -0
src/popup/components/main.jsx +97 -0
src/popup/components/sections/footer.jsx +80 -0
src/popup/components/sections/header.jsx +116 -0
src/popup/components/sections/menu.jsx +111 -0
src/popup/components/sections/progress.jsx +67 -0
src/popup/components/sections/status.jsx +114 -0
src/popup/constants/action-types-navigation.js +23 -0
src/popup/containers/app.jsx +87 -0
src/popup/containers/progress-container.jsx +65 -0
src/popup/hocs/is-speaking-updater.jsx +42 -0
src/popup/hocs/is-speaking.jsx +111 -0
src/popup/hocs/progress-updater.jsx +52 -0
src/popup/hocs/progress.jsx +117 -0
src/popup/load-root.jsx +32 -0
src/popup/popup.html +24 -85
src/popup/popup.html.js +34 -0
src/popup/popup.js +13 -70
src/popup/popup.template.html +41 -0
src/popup/reducers/index.js +32 -0
src/{options/reducers/metadata.js => popup/reducers/navigation.js} +7 -8
src/shared/actions/index.js +33 -0
src/{options => shared}/actions/metadata.js +24 -0
src/shared/actions/navigation.js +29 -0
src/shared/actions/progress.js +33 -0
src/shared/actions/speaking.js +30 -0
src/{options => shared}/actions/voices.js +21 -18
src/{options/containers/root.jsx => shared/components/discretional.jsx} +16 -16
src/shared/components/form/checkbox.jsx +71 -0
src/shared/components/icon/icon.jsx +80 -0
src/shared/components/icon/social-share-icon.jsx +75 -0
src/shared/components/icon/talkie-free-icon.jsx +63 -0
src/shared/components/icon/talkie-premium-icon.jsx +63 -0
src/shared/components/icon/talkie-version-icon.jsx +75 -0
src/shared/components/section/free-section.jsx +86 -0
src/shared/components/section/premium-section.jsx +86 -0
src/shared/components/section/styles/section-base.js +53 -0
src/shared/components/style-root.jsx +95 -0
src/shared/configuration.js +29 -7
src/{options => shared}/constants/action-types-metadata.js +6 -0
src/shared/constants/action-types-navigation.js +19 -0
src/shared/constants/action-types-progress.js +23 -0
src/shared/constants/action-types-speaking.js +23 -0
src/{options => shared}/constants/action-types-voices.js +0 -0
src/shared/containers/providers.jsx +67 -0
src/shared/containers/root.jsx +57 -0
src/shared/containers/state-root.jsx +90 -0
src/shared/content-logger.js +4 -2
src/shared/hocs/broadcaster-provider.jsx +43 -0
src/shared/hocs/broadcaster.jsx +36 -0
src/{options => shared}/hocs/configuration-provider.jsx +4 -2
src/{options => shared}/hocs/configure.jsx +2 -2
src/shared/hocs/styled.jsx +27 -0
src/{options => shared}/hocs/translate.jsx +2 -2
src/{options => shared}/hocs/translation-provider.jsx +2 -1
src/shared/log.js +10 -2
src/{background => shared}/metadata-manager.js +91 -5
src/shared/reducers/index.js +37 -0
src/shared/reducers/metadata.js +45 -0
src/shared/reducers/navigation.js +32 -0
src/shared/reducers/progress.js +41 -0
src/shared/reducers/speaking.js +37 -0
src/{options => shared}/reducers/voices.js +4 -30
src/shared/renderers/auto-root.js +87 -0
src/shared/renderers/load-root.jsx +84 -0
src/shared/renderers/render-react-html.js +111 -0
src/{options => shared}/store/configureStore.development.js +0 -0
src/{options => shared}/store/configureStore.js +0 -0
src/{options => shared}/store/configureStore.production.js +3 -6
src/shared/styled/button/button-base.jsx +25 -0
src/shared/styled/form/form-base.jsx +36 -0
src/shared/styled/layout/layout-base.jsx +29 -0
src/shared/styled/list/list-base.jsx +30 -0
src/shared/styled/table/table-base.jsx +29 -0
src/shared/styled/text/lighter.jsx +29 -0
src/shared/styled/text/text-base.jsx +35 -0
src/shared/styles/button/button-base.js +44 -0
src/shared/styles/form/form-base.js +46 -0
src/shared/styles/layout/layout-base.js +43 -0
src/shared/styles/list/list-base.js +50 -0
src/shared/styles/table/table-base.js +31 -0
src/shared/styles/text/lighter.js +36 -0
src/shared/styles/text/text-base.js +58 -0
src/shared/tabs.js +7 -4
src/{options => shared}/utils/basic.js +0 -0
src/shared/utils/reduce-helpers.js +68 -0
src/{options => shared}/utils/storage.js +5 -12
src/shared/utils/store-helpers.js +27 -0
src/{options => shared}/utils/transform-voices.js +0 -0
src/shared/utils/ui.js +41 -0
src/split-environments/api.js +156 -0
src/split-environments/broadcaster-provider.js +23 -0
src/split-environments/dynamic-environment.js +23 -0
src/split-environments/internal-url-provider.js +23 -0
src/split-environments/locale-provider.js +23 -0
src/split-environments/manifest-provider.js +23 -0
src/split-environments/node/broadcaster-provider.js +27 -0
src/split-environments/node/dynamic-environment.js +33 -0
src/split-environments/node/internal-url-provider.js +30 -0
src/{options/reducers/reduce-helpers.js => split-environments/node/locale-provider.js} +15 -10
src/split-environments/node/manifest-provider.js +42 -0
src/split-environments/node/store-provider.js +47 -0
src/split-environments/node/styletron-provider.js +29 -0
src/split-environments/node/translator-provider.js +86 -0
src/split-environments/store-provider.js +23 -0
src/split-environments/styletron-provider.js +23 -0
src/split-environments/translator-provider.js +23 -0
src/split-environments/webextension/broadcaster-provider.js +30 -0
src/split-environments/webextension/dynamic-environment.js +33 -0
src/split-environments/webextension/internal-url-provider.js +29 -0
src/split-environments/webextension/locale-provider.js +27 -0
src/split-environments/webextension/manifest-provider.js +29 -0
src/split-environments/webextension/store-provider.development.js +58 -0
src/split-environments/webextension/store-provider.js +89 -0
src/split-environments/webextension/styletron-provider.js +29 -0
src/split-environments/webextension/translator-provider.js +35 -0
src/stay-alive/stay-alive.js +2 -0

Commit categories (3)