diff --git a/app/appListeners.js b/app/appListeners.js index 984b1e6..24d332b 100644 --- a/app/appListeners.js +++ b/app/appListeners.js @@ -1,4 +1,4 @@ -export const appListeners = (app, state, emitter) => { +const appListeners = (app, state, emitter) => { emitter.on(state.events.DOMCONTENTLOADED, () => { emitter.emit(state.events.DOMTITLECHANGE, app.siteConfig.siteName); @@ -53,10 +53,14 @@ export const appListeners = (app, state, emitter) => { }).then(result => callback(result)); }); - state.i18n.fetchLocaleUI().then(() => { - app.checkIfLoggedIn(state).then(isLoggedIn => { - emitter.emit(state.events.RENDER); // This should hopefully only run once after the DOM is loaded. It prevents routing issues where 'render' hasn't been defined yet + if (typeof window !== 'undefined') { + state.i18n.fetchLocaleUI().then(() => { + app.checkIfLoggedIn(state).then(isLoggedIn => { + emitter.emit(state.events.RENDER); // This should hopefully only run once after the DOM is loaded. It prevents routing issues where 'render' hasn't been defined yet + }); }); - }) + } }); -} \ No newline at end of file +} + +module.exports = { appListeners }; diff --git a/app/appRoutes.js b/app/appRoutes.js index ea5caeb..25b22ba 100644 --- a/app/appRoutes.js +++ b/app/appRoutes.js @@ -1,12 +1,12 @@ -import { globalView } from './views/global'; -import { homeView } from './views/home'; -import { aboutView } from './views/about'; -import { loginView } from './views/login'; -import { searchView } from './views/search'; -import { shelvesView } from './views/shelves'; -import { errorView } from './views/404'; +const { globalView } = require('./views/global'); +const { homeView } = require('./views/home'); +const { aboutView } = require('./views/about'); +const { loginView } = require('./views/login'); +const { searchView } = require('./views/search'); +const { shelvesView } = require('./views/shelves'); +const { errorView } = require('./views/404'); -export const appRoutes = (app) => { +const appRoutes = (app) => { app.route('/', (state, emit) => globalView(state, emit, homeView)); app.route('/about', (state, emit) => globalView(state, emit, aboutView)); @@ -21,3 +21,5 @@ export const appRoutes = (app) => { app.route('/404', (state, emit) => globalView(state, emit, errorView)); } + +module.exports = { appRoutes }; diff --git a/app/appState.js b/app/appState.js index 40e2591..3ff2673 100644 --- a/app/appState.js +++ b/app/appState.js @@ -1,11 +1,15 @@ -import { I18n } from "./i18n"; +const { I18n } = require("./i18n"); -export const appState = (app, state, emitter) => { +const appState = (app, state, emitter) => { state.events.SET_LANGUAGE = 'setLanguage'; state.events.ADD_TO_SHELF = 'addToShelf'; - state.language = app.getSettingsItem('lang') ? app.getSettingsItem('lang') : (navigator.language || navigator.userLanguage).split('-')[0]; + if (typeof window !== 'undefined') { + state.language = app.getSettingsItem('lang') ? app.getSettingsItem('lang') : (window.navigator.language || window.navigator.userLanguage).split('-')[0]; + state.isLoggedIn = false; + state.i18n = new I18n(state); // Global I18n class passed to all views + } state.viewStates = {}; - state.isLoggedIn = false; - state.i18n = new I18n(state); // Global I18n class passed to all views -} \ No newline at end of file +} + +module.exports = { appState }; diff --git a/app/appUtilities.js b/app/appUtilities.js index 896ddb6..09f57aa 100644 --- a/app/appUtilities.js +++ b/app/appUtilities.js @@ -1,6 +1,6 @@ -export const appUtilities = (app) => { +const appUtilities = (app) => { app.getSettingsItem = settingsKey => { - let savedSettings = window.localStorage.getItem('settings'); + let savedSettings = typeof window !== 'undefined' && window.localStorage.getItem('settings'); if (savedSettings) { savedSettings = JSON.parse(savedSettings); if (typeof savedSettings[settingsKey] !== 'undefined') { @@ -10,6 +10,8 @@ export const appUtilities = (app) => { return null; } app.setSettingsItem = (settingsKey, value) => { + if (typeof window === 'undefined') return null; + let savedSettings = window.localStorage.getItem('settings'); if (savedSettings) { savedSettings = JSON.parse(savedSettings); @@ -21,6 +23,7 @@ export const appUtilities = (app) => { } app.checkIfLoggedIn = (appState) => { + if (typeof window === 'undefined') return false; return fetch('/api/account/validate', { method: 'post' }) .then(response => response.json()) .then(response => { @@ -34,4 +37,6 @@ export const appUtilities = (app) => { return true; }); } -} \ No newline at end of file +} + +module.exports = { appUtilities }; diff --git a/app/i18n.js b/app/i18n.js index 7df1aa6..568583b 100644 --- a/app/i18n.js +++ b/app/i18n.js @@ -1,4 +1,4 @@ -export class I18n { +class I18n { constructor(appState) { this.appState = appState; this.availableLanguages = null; @@ -56,6 +56,7 @@ export class I18n { }, Object.assign({}, language)); if (translation === false) { + console.log(this); if (language.locale !== this.default.locale) { console.warn(`The translation for "${target}" is not set in the ${this.language.locale} locale. Using ${this.default.name} (${this.default.locale}) instead.`); return this.translate(target, true); @@ -71,3 +72,5 @@ export class I18n { return this.translate(translation); } } + +module.exports = { I18n }; diff --git a/app/index.js b/app/index.js index d82d77a..309d0b4 100644 --- a/app/index.js +++ b/app/index.js @@ -1,33 +1,43 @@ -import 'babel-polyfill'; +require('babel-polyfill'); -import choo from 'choo'; +const choo = require('choo'); -import config from './config.json'; -import { appRoutes } from './appRoutes'; -import { appListeners } from './appListeners'; -import { appState } from './appState.js'; -import { appUtilities } from './appUtilities.js'; +const config = require('./config.json'); +const { appRoutes } = require('./appRoutes'); +const { appListeners } = require('./appListeners'); +const { appState } = require('./appState.js'); +const { appUtilities } = require('./appUtilities.js'); -const app = choo(); +function frontend() { + const app = choo(); -if (process.env.NODE_ENV !== 'production') { - // Only runs in development and will be stripped from production build. - app.use(require('choo-devtools')()); // Exposes `choo` to the console for debugging! + if (process.env.NODE_ENV !== 'production') { + // Only runs in development and will be stripped from production build. + app.use(require('choo-devtools')()); // Exposes `choo` to the console for debugging! + } + + app.use((state, emitter) => { + app.siteConfig = config; + appUtilities(app); + }); + + app.use((state, emitter) => { + appState(app, state); + + // Listeners + appListeners(app, state, emitter); + }); + + // Routes + appRoutes(app); + + app.mount('body'); // Overwrite the `` tag with the content of the Choo app + + return app; } -app.use((state, emitter) => { - app.siteConfig = config; - appUtilities(app); -}); +if (typeof window !== 'undefined') { + frontend(); +} -app.use((state, emitter) => { - appState(app, state); - - // Listeners - appListeners(app, state, emitter); -}); - -// Routes -appRoutes(app); - -app.mount('body'); // Overwrite the `` tag with the content of the Choo app +module.exports = frontend; diff --git a/app/views/404.js b/app/views/404.js index a089588..9cfa628 100644 --- a/app/views/404.js +++ b/app/views/404.js @@ -1,6 +1,6 @@ -import html from 'choo/html'; +const html = require('choo/html'); -export const errorView = (state, emit, i18n) => { +const errorView = (state, emit, i18n) => { return html`

${i18n.__('404.header')}

@@ -9,4 +9,6 @@ export const errorView = (state, emit, i18n) => {

${i18n.__('404.subheader')}

`; -} \ No newline at end of file +} + +module.exports = { errorView }; diff --git a/app/views/about.js b/app/views/about.js index 30df952..91e8530 100644 --- a/app/views/about.js +++ b/app/views/about.js @@ -1,6 +1,6 @@ -import html from 'choo/html'; +const html = require('choo/html'); -export const aboutView = (state, emit, i18n) => { +const aboutView = (state, emit, i18n) => { const content = html`
`; const community = html`
`; @@ -19,4 +19,6 @@ export const aboutView = (state, emit, i18n) => { content, community, ]; -} \ No newline at end of file +} + +module.exports = { aboutView }; diff --git a/app/views/controller.js b/app/views/controller.js index 450c251..9629859 100644 --- a/app/views/controller.js +++ b/app/views/controller.js @@ -1,4 +1,4 @@ -export class ViewController { +class ViewController { constructor(state, i18n, viewName, defaultState = {}) { // Store the global app state so it's accessible but out of the way. this.appState = state; @@ -15,4 +15,6 @@ export class ViewController { get isLoggedIn () { return this.appState.isLoggedIn; } -} \ No newline at end of file +} + +module.exports = { ViewController }; diff --git a/app/views/global.js b/app/views/global.js index 4483f76..6a65b0c 100644 --- a/app/views/global.js +++ b/app/views/global.js @@ -1,10 +1,23 @@ -import html from 'choo/html'; +const html = require('choo/html'); -import headerImage from '../../dev/images/header.png'; +let headerImage; -export const globalView = (state, emit, view) => { +if (typeof window !== 'undefined') { + // Make Parcel bundler process image + headerImage = require('../../dev/images/header.png'); +} else { + // Make server get processed image path + const fs = require('fs'); + const path = require('path'); + const publicPath = path.resolve('public'); + const publicFiles = fs.readdirSync(publicPath); + const headerImageFileName = publicFiles.find(fileName => /header\..+?\.png/.test(fileName)); + headerImage = path.relative(publicPath, path.resolve(publicPath, headerImageFileName)); +} + +const globalView = (state, emit, view) => { const { i18n } = state; - if (i18n.needsFetch) { + if (typeof window !== 'undefined' && i18n.needsFetch) { return html``; } // Create a wrapper for view content that includes global header/footer @@ -70,4 +83,6 @@ export const globalView = (state, emit, view) => { `; -} \ No newline at end of file +} + +module.exports = { globalView }; diff --git a/app/views/home/controller.js b/app/views/home/controller.js index dcb11e1..7b55248 100644 --- a/app/views/home/controller.js +++ b/app/views/home/controller.js @@ -1,6 +1,6 @@ -import { ViewController } from '../controller'; +const { ViewController } = require('../controller'); -export class HomeController extends ViewController { +class HomeController extends ViewController { constructor(state, i18n) { // Super passes state, view name, and default state to ViewController, // which stores state in this.appState and the view controller's state to this.state @@ -19,4 +19,6 @@ export class HomeController extends ViewController { // either bind the class's 'this' instance to the method first... // or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead. } -} \ No newline at end of file +} + +module.exports = { HomeController } diff --git a/app/views/home/index.js b/app/views/home/index.js index 52d7898..6a0c257 100644 --- a/app/views/home/index.js +++ b/app/views/home/index.js @@ -1,19 +1,21 @@ -import html from 'choo/html'; +const html = require('choo/html'); -import { HomeController } from './controller'; // The controller for this view, where processing should happen. -import { loggedOutView } from './loggedOut'; -import { loggedInView } from './loggedIn'; +const { HomeController } = require('./controller'); // The controller for this view, where processing should happen. +const { loggedOutView } = require('./loggedOut'); +const { loggedInView } = require('./loggedIn'); // This is the view function that is exported and used in the view manager. -export const homeView = (state, emit, i18n) => { +const homeView = (state, emit, i18n) => { const controller = new HomeController(state, i18n); // Returning an array in a view allows non-shared parent HTML elements. // This one doesn't have the problem right now, but it's good to remember. return [ - (!controller.isLoggedIn + (!controller.isLoggedIn || typeof window === 'undefined' ? loggedOutView(controller, emit) : loggedInView(controller, emit) ), ]; -} \ No newline at end of file +} + +module.exports = { homeView }; diff --git a/app/views/home/loggedIn.js b/app/views/home/loggedIn.js index f94c6a0..a383161 100644 --- a/app/views/home/loggedIn.js +++ b/app/views/home/loggedIn.js @@ -1,6 +1,6 @@ -import html from 'choo/html'; +const html = require('choo/html'); -export const loggedInView = (homeController, emit) => { +const loggedInView = (homeController, emit) => { const { __ } = homeController.i18n; return [ @@ -36,4 +36,6 @@ export const loggedInView = (homeController, emit) => { `, ]; -} \ No newline at end of file +} + +module.exports = { loggedInView }; diff --git a/app/views/home/loggedOut.js b/app/views/home/loggedOut.js index 05996d6..56d804a 100644 --- a/app/views/home/loggedOut.js +++ b/app/views/home/loggedOut.js @@ -1,6 +1,6 @@ -import html from 'choo/html'; +const html = require('choo/html'); -export const loggedOutView = (homeController, emit) => { +const loggedOutView = (homeController, emit) => { const { __ } = homeController.i18n; return [ @@ -80,4 +80,6 @@ export const loggedOutView = (homeController, emit) => { ${__('home.logged_out.join_now')} `, ]; -} \ No newline at end of file +} + +module.exports = { loggedOutView }; diff --git a/app/views/login/controller.js b/app/views/login/controller.js index b8bbe82..1547b28 100644 --- a/app/views/login/controller.js +++ b/app/views/login/controller.js @@ -1,6 +1,6 @@ -import { ViewController } from '../controller'; +const { ViewController } = require('../controller'); -export class LoginController extends ViewController { +class LoginController extends ViewController { constructor(state, emit, i18n) { // Super passes state, view name, and default state to ViewController, // which stores state in this.appState and the view controller's state to this.state @@ -178,4 +178,6 @@ export class LoginController extends ViewController { this.clearCreateAccountForm(); }) } -} \ No newline at end of file +} + +module.exports = { LoginController }; diff --git a/app/views/login/index.js b/app/views/login/index.js index fc6ac2b..7e1acd6 100644 --- a/app/views/login/index.js +++ b/app/views/login/index.js @@ -1,8 +1,8 @@ -import html from 'choo/html'; +const html = require('choo/html'); -import { LoginController } from './controller'; +const { LoginController } = require('./controller'); -export const loginView = (state, emit, i18n) => { +const loginView = (state, emit, i18n) => { const controller = new LoginController(state, emit, i18n); const { __ } = controller.i18n; @@ -164,4 +164,6 @@ export const loginView = (state, emit, i18n) => { `; -} \ No newline at end of file +} + +module.exports = { loginView }; diff --git a/app/views/partials/modal.js b/app/views/partials/modal.js index ccf24f2..d57501f 100644 --- a/app/views/partials/modal.js +++ b/app/views/partials/modal.js @@ -1,6 +1,6 @@ -import html from 'choo/html'; +const html = require('choo/html'); -export const modal = (modalId, controller, contentHTML, options = {}) => { +const modal = (modalId, controller, contentHTML, options = {}) => { /* Options: * controller : Pass the controller class with state; Requires get/set for openModal in state. * buttonHTML : Displayed in place of the default button to open the modal @@ -76,4 +76,6 @@ export const modal = (modalId, controller, contentHTML, options = {}) => { `, ]; -} \ No newline at end of file +} + +module.exports = { modal }; diff --git a/app/views/partials/reviewCard.js b/app/views/partials/reviewCard.js index f144041..3d9170c 100644 --- a/app/views/partials/reviewCard.js +++ b/app/views/partials/reviewCard.js @@ -1,8 +1,8 @@ -import html from 'choo/html'; +const html = require('choo/html'); -import { starRating } from './starRating'; +const { starRating } = require('./starRating'); -export const reviewCard = (controller, review) => { +const reviewCard = (controller, review) => { const { __ } = controller.i18n; return html`
@@ -26,4 +26,6 @@ export const reviewCard = (controller, review) => {
`; -} \ No newline at end of file +} + +module.exports = { reviewCard }; diff --git a/app/views/partials/starRating.js b/app/views/partials/starRating.js index e42ebc7..262babf 100644 --- a/app/views/partials/starRating.js +++ b/app/views/partials/starRating.js @@ -1,6 +1,6 @@ -import html from 'choo/html'; +const html = require('choo/html'); -export const starRating = (rating) => { +const starRating = (rating) => { const wholeStars = Math.floor(rating); const hasPartial = rating - wholeStars > 0; const emptyStars = 5 - wholeStars - (hasPartial ? 1 : 0); @@ -16,4 +16,6 @@ export const starRating = (rating) => { } return stars; -} \ No newline at end of file +} + +module.exports = { starRating }; diff --git a/app/views/search/controller.js b/app/views/search/controller.js index 1be489f..33f1943 100644 --- a/app/views/search/controller.js +++ b/app/views/search/controller.js @@ -1,7 +1,7 @@ -import { ViewController } from '../controller'; -import { ShelvesController } from '../shelves/controller'; +const { ViewController } = require('../controller'); +const { ShelvesController } = require('../shelves/controller'); -export class SearchController extends ViewController { +class SearchController extends ViewController { constructor(state, emit, i18n) { // Super passes state, view name, and default state to ViewController, // which stores state in this.appState and the view controller's state to this.state @@ -155,4 +155,6 @@ export class SearchController extends ViewController { this.emit(RENDER); }); } -} \ No newline at end of file +} + +module.exports = { SearchController }; diff --git a/app/views/search/index.js b/app/views/search/index.js index 3a5b08d..a93f950 100644 --- a/app/views/search/index.js +++ b/app/views/search/index.js @@ -1,11 +1,11 @@ -import html from 'choo/html'; +const html = require('choo/html'); -import { SearchController } from './controller'; // The controller for this view, where processing should happen. -import { resultDetails } from './resultDetails'; -import { modal } from '../partials/modal'; +const { SearchController } = require('./controller'); // The controller for this view, where processing should happen. +const { resultDetails } = require('./resultDetails'); +const { modal } = require('../partials/modal'); // This is the view function that is exported and used in the view manager. -export const searchView = (state, emit, i18n) => { +const searchView = (state, emit, i18n) => { const controller = new SearchController(state, emit, i18n); const { __ } = controller.i18n; @@ -156,4 +156,6 @@ export const searchView = (state, emit, i18n) => { } `, ]; -} \ No newline at end of file +} + +module.exports = { searchView }; diff --git a/app/views/search/resultDetails.js b/app/views/search/resultDetails.js index 9ddbc86..882aa69 100644 --- a/app/views/search/resultDetails.js +++ b/app/views/search/resultDetails.js @@ -1,10 +1,10 @@ -import html from 'choo/html'; +const html = require('choo/html'); -import { reviewCard } from '../partials/reviewCard'; -import { starRating } from '../partials/starRating'; -import { modal } from '../partials/modal'; +const { reviewCard } = require('../partials/reviewCard'); +const { starRating } = require('../partials/starRating'); +const { modal } = require('../partials/modal'); -export const resultDetails = (searchController, result, emit = () => {}) => { +const resultDetails = (searchController, result, emit = () => {}) => { const { __ } = searchController.i18n; const source = result.sources[0]; const modalId = `result_${source.uri}`; @@ -120,4 +120,6 @@ export const resultDetails = (searchController, result, emit = () => {}) => { headerText: result.name, onShow, }); -} \ No newline at end of file +} + +module.exports = { resultDetails }; diff --git a/app/views/shelves/controller.js b/app/views/shelves/controller.js index 153f3ea..3a4a098 100644 --- a/app/views/shelves/controller.js +++ b/app/views/shelves/controller.js @@ -1,6 +1,6 @@ -import { ViewController } from '../controller'; +const { ViewController } = require('../controller'); -export class ShelvesController extends ViewController { +class ShelvesController extends ViewController { constructor(state, i18n) { // Super passes state, view name, and default state to ViewController, // which stores state in this.appState and the view controller's state to this.state @@ -42,4 +42,6 @@ export class ShelvesController extends ViewController { this.state.loadedShelves[this.targetShelf] = shelf; }); } -} \ No newline at end of file +} + +module.exports = { ShelvesController }; diff --git a/app/views/shelves/index.js b/app/views/shelves/index.js index a6084f6..c40cecc 100644 --- a/app/views/shelves/index.js +++ b/app/views/shelves/index.js @@ -1,11 +1,11 @@ -import html from 'choo/html'; +const html = require('choo/html'); -import { ShelvesController } from './controller'; // The controller for this view, where processing should happen. -import { shelfView } from './shelf'; -import { userShelvesView } from './userShelves'; +const { ShelvesController } = require('./controller'); // The controller for this view, where processing should happen. +const { shelfView } = require('./shelf'); +const { userShelvesView } = require('./userShelves'); // This is the view function that is exported and used in the view manager. -export const shelvesView = (state, emit, i18n) => { +const shelvesView = (state, emit, i18n) => { const controller = new ShelvesController(state, i18n); // Returning an array in a view allows non-shared parent HTML elements. @@ -16,4 +16,6 @@ export const shelvesView = (state, emit, i18n) => { : userShelvesView(controller, emit) ), ]; -} \ No newline at end of file +} + +module.exports = { shelvesView }; diff --git a/app/views/shelves/shelf.js b/app/views/shelves/shelf.js index e24b5bf..34620dc 100644 --- a/app/views/shelves/shelf.js +++ b/app/views/shelves/shelf.js @@ -1,9 +1,9 @@ -import html from 'choo/html'; +const html = require('choo/html'); -import { starRating } from '../partials/starRating'; -import { modal } from '../partials/modal'; +const { starRating } = require('../partials/starRating'); +const { modal } = require('../partials/modal'); -export const shelfView = (shelvesController, emit) => { +const shelfView = (shelvesController, emit) => { const { __ } = shelvesController.i18n; if (shelvesController.targetShelf === null) { @@ -107,4 +107,6 @@ export const shelfView = (shelvesController, emit) => { })} `, ]; -} \ No newline at end of file +} + +module.exports = { shelfView }; diff --git a/app/views/shelves/userShelves/editModal.js b/app/views/shelves/userShelves/editModal.js index 3095573..a418cb1 100644 --- a/app/views/shelves/userShelves/editModal.js +++ b/app/views/shelves/userShelves/editModal.js @@ -1,8 +1,8 @@ -import html from 'choo/html'; +const html = require('choo/html'); -import { modal } from '../../partials/modal'; +const { modal } = require('../../partials/modal'); -export const editModal = (shelf, shelvesController) => { +const editModal = (shelf, shelvesController) => { const { __ } = shelvesController.i18n; const modalId = `editShelf${shelf.id}`; @@ -26,4 +26,6 @@ export const editModal = (shelf, shelvesController) => { `, }); -} \ No newline at end of file +} + +module.exports = { editModal }; diff --git a/app/views/shelves/userShelves/index.js b/app/views/shelves/userShelves/index.js index 818be52..b82250b 100644 --- a/app/views/shelves/userShelves/index.js +++ b/app/views/shelves/userShelves/index.js @@ -1,7 +1,7 @@ -import html from 'choo/html'; -import { editModal } from './editModal'; +const html = require('choo/html'); +const { editModal } = require('./editModal'); -export const userShelvesView = (shelvesController, emit) => { +const userShelvesView = (shelvesController, emit) => { const { __ } = shelvesController.i18n; if (!shelvesController.isLoggedIn) { @@ -52,4 +52,6 @@ export const userShelvesView = (shelvesController, emit) => { })} `, ]; -} \ No newline at end of file +} + +module.exports = { userShelvesView };