mirror
/
photoview
mirror of https://github.com/photoview/photoview.git
1
Fork 0
Code

Add babel to esbuild and start on translation

This commit is contained in:
viktorstrate 2021-04-04 12:06:12 +02:00
parent ac8632cd82
commit ef50d7f23b
No known key found for this signature in database
GPG Key ID: 3F855605109C1E8A
7 changed files with 136 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/babel.config.js
View File

@ -1,16 +0,0 @@
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [
'styled-components',
'@babel/plugin-transform-runtime',
'@babel/plugin-transform-modules-commonjs',
'graphql-tag',
// [
// 'transform-semantic-ui-react-imports',
// {
// convertMemberImports: true,
// addCssImports: true,
// },
// ],
],
}

4
ui/babel.config.json Normal file
View File

@ -0,0 +1,4 @@
{
"presets": ["@babel/preset-react"],
"plugins": ["styled-components", "graphql-tag"]
}

23
ui/build.js → ui/build.mjs
View File

@ -1,9 +1,13 @@
const fs = require('fs-extra')
const esbuild = require('esbuild')
const bs = require('browser-sync').create()
const historyApiFallback = require('connect-history-api-fallback')
import fs from 'fs-extra'
import esbuild from 'esbuild'
import babel from 'esbuild-plugin-babel'
import browserSync from 'browser-sync'
import historyApiFallback from 'connect-history-api-fallback'
import dotenv from 'dotenv'
import workboxBuild from 'workbox-build'
require('dotenv').config()
dotenv.config()
const bs = browserSync.create()
const production = process.env.NODE_ENV == 'production'
const watchMode = process.argv[2] == 'watch'
@ -17,6 +21,11 @@ const defineEnv = ENVIRONMENT_VARIABLES.reduce((acc, key) => {
const esbuildOptions = {
entryPoints: ['src/index.js'],
plugins: [
babel({
filter: /photoview\/ui\/src\/.*\.js$/,
}),
],
publicPath: process.env.UI_PUBLIC_URL || '/',
outdir: 'dist',
format: 'esm',
@ -63,9 +72,9 @@ if (watchMode) {
bs.reload(args)
})
} else {
esbuild.buildSync(esbuildOptions)
esbuild.build(esbuildOptions).then(() => console.log('esbuild done'))
require('workbox-build').generateSW({
workboxBuild.generateSW({
globDirectory: 'dist/',
globPatterns: ['**/*.{png,svg,woff2,ttf,eot,woff,js,ico,html,json,css}'],
swDest: 'dist/service-worker.js',

84
ui/package-lock.json generated
View File

@ -25,6 +25,7 @@
"copy-to-clipboard": "^3.3.1",
"dotenv": "^8.2.0",
"esbuild": "^0.8.52",
"esbuild-plugin-babel": "^0.2.3",
"eslint": "^7.23.0",
"eslint-plugin-jest": "^24.3.3",
"eslint-plugin-jest-dom": "^3.7.0",
@ -32,11 +33,13 @@
"eslint-plugin-react-hooks": "^4.2.0",
"fs-extra": "^9.1.0",
"graphql": "^15.5.0",
"i18next": "^20.1.0",
"mapbox-gl": "^2.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-i18next": "^11.8.12",
"react-router-dom": "^5.2.0",
"react-router-prop-types": "^1.0.5",
"react-spring": "^8.0.27",
@ -4984,6 +4987,14 @@
"esbuild": "bin/esbuild"
}
},
"node_modules/esbuild-plugin-babel": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/esbuild-plugin-babel/-/esbuild-plugin-babel-0.2.3.tgz",
"integrity": "sha512-hGLL31n+GvBhkHUpPCt1sU4ynzOH7I1IUkKhera66jigi4mHFPL6dfJo44L6/1rfcZudXx+wGdf9VOifzDPqYQ==",
"peerDependencies": {
"@babel/core": "^7.0.0"
}
},
"node_modules/escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@ -6473,6 +6484,14 @@
"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
"dev": true
},
"node_modules/html-parse-stringify2": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
"integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
"dependencies": {
"void-elements": "^2.0.1"
}
},
"node_modules/http-errors": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@ -6551,6 +6570,14 @@
"url": "https://github.com/sponsors/typicode"
}
},
"node_modules/i18next": {
"version": "20.1.0",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-20.1.0.tgz",
"integrity": "sha512-sV+ZwTM4Ik4d6wKdwNS/ocKmvXi6DFA/YHMgdQX3i4L5993jnbo1/j1pK/c4+zBOjexer4dt+c5JHsFj4CUoXQ==",
"dependencies": {
"@babel/runtime": "^7.12.0"
}
},
"node_modules/iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -10909,6 +10936,19 @@
"react-side-effect": "^2.1.0"
}
},
"node_modules/react-i18next": {
"version": "11.8.12",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.12.tgz",
"integrity": "sha512-M2PSVP9MzT/7yofXfCOF5gAVotinrM4BXWiguk8uFSznJsfFzTjrp3K9CBWcXitpoCBVZGZJ2AnbaWGSNkJqfw==",
"dependencies": {
"@babel/runtime": "^7.13.6",
"html-parse-stringify2": "^2.0.1"
},
"peerDependencies": {
"i18next": ">= 19.0.0",
"react": ">= 16.8.0"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -13336,6 +13376,14 @@
"extsprintf": "^1.2.0"
}
},
"node_modules/void-elements": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
"integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/vt-pbf": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.1.tgz",
@ -17813,6 +17861,12 @@
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.8.52.tgz",
"integrity": "sha512-b5KzFweLLXoXQwdC/e2+Z80c8uo2M5MgP7yQEEebkFw6In4T9CvYcNoM2ElvJt8ByO04zAZUV0fZkXmXoi2s9A=="
},
"esbuild-plugin-babel": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/esbuild-plugin-babel/-/esbuild-plugin-babel-0.2.3.tgz",
"integrity": "sha512-hGLL31n+GvBhkHUpPCt1sU4ynzOH7I1IUkKhera66jigi4mHFPL6dfJo44L6/1rfcZudXx+wGdf9VOifzDPqYQ==",
"requires": {}
},
"escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@ -18955,6 +19009,14 @@
"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
"dev": true
},
"html-parse-stringify2": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
"integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
"requires": {
"void-elements": "^2.0.1"
}
},
"http-errors": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@ -19014,6 +19076,14 @@
"integrity": "sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==",
"dev": true
},
"i18next": {
"version": "20.1.0",
"resolved": "https://registry.npmjs.org/i18next/-/i18next-20.1.0.tgz",
"integrity": "sha512-sV+ZwTM4Ik4d6wKdwNS/ocKmvXi6DFA/YHMgdQX3i4L5993jnbo1/j1pK/c4+zBOjexer4dt+c5JHsFj4CUoXQ==",
"requires": {
"@babel/runtime": "^7.12.0"
}
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -22431,6 +22501,15 @@
"react-side-effect": "^2.1.0"
}
},
"react-i18next": {
"version": "11.8.12",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.12.tgz",
"integrity": "sha512-M2PSVP9MzT/7yofXfCOF5gAVotinrM4BXWiguk8uFSznJsfFzTjrp3K9CBWcXitpoCBVZGZJ2AnbaWGSNkJqfw==",
"requires": {
"@babel/runtime": "^7.13.6",
"html-parse-stringify2": "^2.0.1"
}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -24430,6 +24509,11 @@
"extsprintf": "^1.2.0"
}
},
"void-elements": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
"integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
},
"vt-pbf": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.1.tgz",

7
ui/package.json
View File

@ -25,6 +25,7 @@
"copy-to-clipboard": "^3.3.1",
"dotenv": "^8.2.0",
"esbuild": "^0.8.52",
"esbuild-plugin-babel": "^0.2.3",
"eslint": "^7.23.0",
"eslint-plugin-jest": "^24.3.3",
"eslint-plugin-jest-dom": "^3.7.0",
@ -32,11 +33,13 @@
"eslint-plugin-react-hooks": "^4.2.0",
"fs-extra": "^9.1.0",
"graphql": "^15.5.0",
"i18next": "^20.1.0",
"mapbox-gl": "^2.2.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-i18next": "^11.8.12",
"react-router-dom": "^5.2.0",
"react-router-prop-types": "^1.0.5",
"react-spring": "^8.0.27",
@ -49,8 +52,8 @@
"workbox-build": "^6.1.2"
},
"scripts": {
"start": "node build.js watch",
"build": "NODE_ENV=production node build.js",
"start": "node build.mjs watch",
"build": "NODE_ENV=production node build.mjs",
"test": "npm run lint && npm run jest",
"lint": "eslint ./src --max-warnings 0 --cache",
"jest": "jest",

15
ui/src/Layout.js
View File

@ -9,6 +9,7 @@ import { Authorized } from './components/routes/AuthorizedRoute'
import { Helmet } from 'react-helmet'
import Header from './components/header/Header'
import { authToken } from './helpers/authentication'
import { useTranslation } from 'react-i18next'
export const ADMIN_QUERY = gql`
query adminQuery {
@ -95,6 +96,8 @@ const SideButtonLabel = styled.div`
`
export const SideMenu = () => {
const { t } = useTranslation()
const adminQuery = authToken() ? useQuery(ADMIN_QUERY) : null
const mapboxQuery = authToken() ? useQuery(MAPBOX_QUERY) : null
@ -105,31 +108,31 @@ export const SideMenu = () => {
<SideMenuContainer>
<SideButton to="/photos" exact>
<Icon name="image" />
<SideButtonLabel>Photos</SideButtonLabel>
<SideButtonLabel>{t('Photos')}</SideButtonLabel>
</SideButton>
<SideButton to="/albums" exact>
<Icon name="images" />
<SideButtonLabel>Albums</SideButtonLabel>
<SideButtonLabel>{t('Albums')}</SideButtonLabel>
</SideButton>
{mapboxEnabled ? (
<SideButton to="/places" exact>
<Icon name="map" />
<SideButtonLabel>Places</SideButtonLabel>
<SideButtonLabel>{t('Places')}</SideButtonLabel>
</SideButton>
) : null}
<SideButton to="/people" exact>
<Icon name="user" />
<SideButtonLabel>People</SideButtonLabel>
<SideButtonLabel>{t('People')}</SideButtonLabel>
</SideButton>
{isAdmin ? (
<SideButton to="/settings" exact>
<Icon name="settings" />
<SideButtonLabel>Settings</SideButtonLabel>
<SideButtonLabel>{t('Settings')}</SideButtonLabel>
</SideButton>
) : null}
<SideButton to="/logout">
<Icon name="lock" />
<SideButtonLabel>Log out</SideButtonLabel>
<SideButtonLabel>{t('Log out')}</SideButtonLabel>
</SideButton>
</SideMenuContainer>
)

18
ui/src/index.js
View File

@ -7,6 +7,24 @@ import registerServiceWorker from './registerServiceWorker'
import client from './apolloClient'
import { ApolloProvider } from '@apollo/client'
import { BrowserRouter as Router } from 'react-router-dom'
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
i18n.use(initReactI18next).init({
resources: {
en: {
translation: {
'Welcome to React': 'Welcome to React and react-i18next',
},
},
},
lng: 'en',
fallbackLng: 'en',
interpolation: {
escapeValue: false,
},
})
const Main = () => (
<ApolloProvider client={client}>