mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-09-19 12:20:11 +00:00
Somewhat working webpack. Sponsors and communities pages done.
This commit is contained in:
Dessalines
parent
2eee936026
commit
241ef72290
20
.babelrc
Normal file
20
.babelrc
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compact": false,
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"loose": true,
|
||||
"targets": {
|
||||
"browsers": ["ie >= 11", "safari > 10"]
|
||||
}
|
||||
}
|
||||
],
|
||||
["@babel/typescript", {"isTSX": true, "allExtensions": true}]
|
||||
],
|
||||
"plugins": [
|
||||
"@babel/plugin-transform-runtime",
|
||||
["babel-plugin-inferno", { "imports": true }],
|
||||
["@babel/plugin-proposal-class-properties", { "loose": true }],
|
||||
]
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
fuse.ts
|
||||
generate_translations.js
|
||||
webpack.config.js
|
||||
src/api_tests
|
||||
|
|
|
|||
8
Dockerfile
Normal file
8
Dockerfile
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
FROM node:14
|
||||
WORKDIR /usr/src/app_name
|
||||
COPY . .
|
||||
RUN yarn
|
||||
RUN yarn build:server
|
||||
RUN yarn build:client
|
||||
EXPOSE 1234
|
||||
CMD yarn serve
|
||||
82
fuse.ts
82
fuse.ts
|
|
@ -1,82 +0,0 @@
|
|||
import { CSSPlugin, FuseBox, FuseBoxOptions, Sparky } from 'fuse-box';
|
||||
import path = require('path');
|
||||
import TsTransformClasscat from 'ts-transform-classcat';
|
||||
import TsTransformInferno from 'ts-transform-inferno';
|
||||
/**
|
||||
* Some of FuseBoxOptions overrides by ts config (module, target, etc)
|
||||
* https://fuse-box.org/page/working-with-targets
|
||||
*/
|
||||
let fuse: FuseBox;
|
||||
const fuseOptions: FuseBoxOptions = {
|
||||
homeDir: './src',
|
||||
output: 'dist/$name.js',
|
||||
sourceMaps: { inline: false, vendor: false },
|
||||
/**
|
||||
* Custom TypeScript Transformers (compile Inferno tsx to ts)
|
||||
*/
|
||||
transformers: {
|
||||
before: [TsTransformClasscat(), TsTransformInferno()],
|
||||
},
|
||||
};
|
||||
const fuseClientOptions: FuseBoxOptions = {
|
||||
...fuseOptions,
|
||||
plugins: [
|
||||
/**
|
||||
* https://fuse-box.org/page/css-resource-plugin
|
||||
* Compile Sass {SassPlugin()}
|
||||
* Make .css files modules-like (allow import them like modules) {CSSModules}
|
||||
* Make .css files modules like and allow import it from node_modules too {CSSResourcePlugin}
|
||||
* Use them all and bundle with {CSSPlugin}
|
||||
* */
|
||||
CSSPlugin(),
|
||||
],
|
||||
};
|
||||
const fuseServerOptions: FuseBoxOptions = {
|
||||
...fuseOptions,
|
||||
};
|
||||
|
||||
Sparky.task('clean', () => {
|
||||
/**Clean distribute (dist) folder */
|
||||
Sparky.src('dist/').clean('dist/');
|
||||
});
|
||||
Sparky.task('config', () => {
|
||||
fuse = FuseBox.init(fuseOptions);
|
||||
fuse.dev();
|
||||
});
|
||||
Sparky.task('test', ['&clean', '&config'], () => {
|
||||
fuse.bundle('client/bundle').test('[**/**.test.tsx]', null);
|
||||
});
|
||||
Sparky.task('client', () => {
|
||||
fuse.opts = fuseClientOptions;
|
||||
fuse
|
||||
.bundle('client/bundle')
|
||||
.target('browser@esnext')
|
||||
.watch('client/**')
|
||||
.hmr()
|
||||
.instructions('> client/index.tsx');
|
||||
});
|
||||
Sparky.task('copy-assets', () =>
|
||||
Sparky.src('**/**.*', { base: 'src/assets' }).dest('dist/assets')
|
||||
);
|
||||
Sparky.task('server', () => {
|
||||
/**Workaround. Should be fixed */
|
||||
fuse.opts = fuseServerOptions;
|
||||
fuse
|
||||
.bundle('server/bundle')
|
||||
.watch('**')
|
||||
.target('server@esnext')
|
||||
.instructions('> [server/index.tsx]')
|
||||
.completed(proc => {
|
||||
proc.require({
|
||||
// tslint:disable-next-line:no-shadowed-variable
|
||||
close: ({ FuseBox }) => FuseBox.import(FuseBox.mainFile).shutdown(),
|
||||
});
|
||||
});
|
||||
});
|
||||
Sparky.task(
|
||||
'dev',
|
||||
['&clean', '&config', '&client', '&server', '©-assets'],
|
||||
() => {
|
||||
fuse.run();
|
||||
}
|
||||
);
|
||||
52
package.json
52
package.json
|
|
@ -4,16 +4,19 @@
|
|||
"author": "Dessalines <tyhou13@gmx.com>",
|
||||
"license": "AGPL-3.0",
|
||||
"scripts": {
|
||||
"build": "yarn run build:server && yarn run build:client",
|
||||
"build:client": "webpack --env.platform=client",
|
||||
"build:server": "webpack --env.platform=server",
|
||||
"clean": "yarn run rimraf dist",
|
||||
"dev": "nodemon --watch ./src/shared/components -e ts,tsx,css,scss --exec yarn run start",
|
||||
"lint": "tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
|
||||
"prebuild": "node generate_translations.js",
|
||||
"prestart": "node generate_translations.js",
|
||||
"start": "set NODE_ENV=development && node -r ts-node/register --inspect fuse.ts dev",
|
||||
"test": "node -r ts-node/register --inspect fuse.ts test"
|
||||
"prebuild": "yarn clean && node generate_translations.js",
|
||||
"serve": "node dist/js/server.js",
|
||||
"start": "yarn run build && yarn run serve"
|
||||
},
|
||||
"repository": "https://github.com/LemmyNet/lemmy-isomorphic-ui",
|
||||
"dependencies": {
|
||||
"@types/autosize": "^3.0.6",
|
||||
"@types/node-fetch": "^2.5.7",
|
||||
"@typescript-eslint/parser": "^4.0.1",
|
||||
"autosize": "^4.0.2",
|
||||
"choices.js": "^9.0.1",
|
||||
"cookie-parser": "^1.4.3",
|
||||
|
|
@ -41,40 +44,57 @@
|
|||
"reconnecting-websocket": "^4.4.0",
|
||||
"rxjs": "^6.5.5",
|
||||
"serialize-javascript": "^4.0.0",
|
||||
"terser": "^4.6.11",
|
||||
"tippy.js": "^6.1.1",
|
||||
"toastify-js": "^1.7.0",
|
||||
"tributejs": "^5.1.3",
|
||||
"ws": "^7.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.5.5",
|
||||
"@babel/plugin-transform-runtime": "^7.11.5",
|
||||
"@babel/plugin-transform-typescript": "^7.11.0",
|
||||
"@babel/preset-env": "7.11.5",
|
||||
"@babel/preset-typescript": "^7.3.3",
|
||||
"@types/autosize": "^3.0.6",
|
||||
"@types/cookie-parser": "^1.4.1",
|
||||
"@types/enzyme": "^3.1.10",
|
||||
"@types/express": "^4.11.1",
|
||||
"@types/jest": "^26.0.10",
|
||||
"@types/node": "^14.6.0",
|
||||
"@types/node-fetch": "^2.5.7",
|
||||
"@types/serialize-javascript": "^4.0.0",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"babel-loader": "^8.0.6",
|
||||
"babel-plugin-inferno": "^6",
|
||||
"bootstrap": "^4.5.2",
|
||||
"classcat": "^4.1.0",
|
||||
"enzyme": "^3.3.0",
|
||||
"enzyme-adapter-inferno": "^1.3.0",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"css-loader": "^4.2.2",
|
||||
"eslint": "^7.5.0",
|
||||
"eslint-plugin-jane": "^8.0.4",
|
||||
"fuse-box": "3.7.1",
|
||||
"fuse-test-runner": "^1.0.16",
|
||||
"husky": "^4.2.5",
|
||||
"inferno-devtools": "^7.4.3",
|
||||
"inferno-test-utils": "^7.4.3",
|
||||
"jest": "^26.4.2",
|
||||
"jsdom": "16.4.0",
|
||||
"jsdom-global": "3.0.2",
|
||||
"lemmy-js-client": "^1.0.8",
|
||||
"lint-staged": "^10.1.3",
|
||||
"mini-css-extract-plugin": "^0.11.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"nodemon": "^2.0.4",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"precss": "^4.0.0",
|
||||
"prettier": "^2.0.4",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass-loader": "^10.0.1",
|
||||
"sortpack": "^2.1.4",
|
||||
"style-loader": "^1.2.1",
|
||||
"terser": "^4.6.11",
|
||||
"ts-node": "^9.0.0",
|
||||
"ts-transform-classcat": "^1.0.0",
|
||||
"ts-transform-inferno": "^4.0.3",
|
||||
"typescript": "^4.0.2"
|
||||
"typescript": "^4.0.2",
|
||||
"webpack": "4.44.1",
|
||||
"webpack-cli": "^3.3.6",
|
||||
"webpack-dev-server": "3.11.0",
|
||||
"webpack-node-externals": "^2.5.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.9.0"
|
||||
|
|
|
|||
|
|
@ -1,21 +1,11 @@
|
|||
import { Component } from 'inferno';
|
||||
import { hydrate } from 'inferno-hydrate';
|
||||
import { BrowserRouter } from 'inferno-router';
|
||||
import { App } from '../shared/components/app';
|
||||
/* import { initDevTools } from 'inferno-devtools'; */
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
isoData: {
|
||||
name: string;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const wrapper = (
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
<App site={window.isoData.site} />
|
||||
</BrowserRouter>
|
||||
);
|
||||
/* initDevTools(); */
|
||||
|
||||
hydrate(wrapper, document.getElementById('root'));
|
||||
|
|
|
|||
|
|
@ -1,35 +1,55 @@
|
|||
import cookieParser = require('cookie-parser');
|
||||
// import cookieParser = require('cookie-parser');
|
||||
import serialize from 'serialize-javascript';
|
||||
import express from 'express';
|
||||
import { StaticRouter } from 'inferno-router';
|
||||
import { renderToString } from 'inferno-server';
|
||||
import { matchPath } from 'inferno-router';
|
||||
import path = require('path');
|
||||
import path from 'path';
|
||||
import { App } from '../shared/components/app';
|
||||
import { IsoData } from '../shared/interfaces';
|
||||
import { routes } from '../shared/routes';
|
||||
import IsomorphicCookie from 'isomorphic-cookie';
|
||||
import { lemmyHttp, setAuth } from '../shared/utils';
|
||||
import { GetSiteForm } from 'lemmy-js-client';
|
||||
const server = express();
|
||||
const port = 1234;
|
||||
|
||||
server.use(express.json());
|
||||
server.use(express.urlencoded({ extended: false }));
|
||||
server.use('/assets', express.static(path.resolve('./dist/assets')));
|
||||
server.use('/static', express.static(path.resolve('./dist/client')));
|
||||
server.use('/assets', express.static(path.resolve('./src/assets')));
|
||||
server.use('/static', express.static(path.resolve('./dist')));
|
||||
|
||||
server.use(cookieParser());
|
||||
// server.use(cookieParser());
|
||||
|
||||
server.get('/*', (req, res) => {
|
||||
server.get('/*', async (req, res) => {
|
||||
const activeRoute = routes.find(route => matchPath(req.url, route)) || {};
|
||||
console.log(activeRoute);
|
||||
const context = {} as any;
|
||||
const isoData = {
|
||||
name: 'fishing sux',
|
||||
};
|
||||
let auth: string = IsomorphicCookie.load('jwt', req);
|
||||
|
||||
let getSiteForm: GetSiteForm = {};
|
||||
setAuth(getSiteForm, auth);
|
||||
|
||||
let promises: Promise<any>[] = [];
|
||||
|
||||
let siteData = lemmyHttp.getSite(getSiteForm);
|
||||
promises.push(siteData);
|
||||
if (activeRoute.fetchInitialData) {
|
||||
promises.push(...activeRoute.fetchInitialData(auth, req.path));
|
||||
}
|
||||
|
||||
let resolver = await Promise.all(promises);
|
||||
|
||||
let isoData: IsoData = {
|
||||
path: req.path,
|
||||
site: resolver[0],
|
||||
routeData: resolver.slice(1, resolver.length),
|
||||
};
|
||||
|
||||
console.log(activeRoute.path);
|
||||
|
||||
const wrapper = (
|
||||
<StaticRouter location={req.url} context={context}>
|
||||
<App />
|
||||
<StaticRouter location={req.url} context={isoData}>
|
||||
<App site={isoData.site} />
|
||||
</StaticRouter>
|
||||
);
|
||||
if (context.url) {
|
||||
|
|
@ -49,24 +69,15 @@ server.get('/*', (req, res) => {
|
|||
|
||||
<!-- Icons -->
|
||||
<link rel="shortcut icon" type="image/svg+xml" href="/assets/favicon.svg" />
|
||||
<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" />
|
||||
<!-- <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" /> -->
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/tribute.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/toastify.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/choices.min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/tippy.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/themes/litely.min.css" id="default-light" media="(prefers-color-scheme: light)" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/themes/darkly.min.css" id="default-dark" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" />
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
|
||||
|
||||
<!-- Scripts -->
|
||||
<script async src="/assets/libs/sortable/sortable.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id='root'>${renderToString(wrapper)}</div>
|
||||
<script src='./static/bundle.js'></script>
|
||||
<script src='/static/js/client.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
|
|
|
|||
|
|
@ -6,19 +6,24 @@ import { routes } from '../../shared/routes';
|
|||
import { Navbar } from '../../shared/components/navbar';
|
||||
import { Footer } from '../../shared/components/footer';
|
||||
import { Symbols } from '../../shared/components/symbols';
|
||||
import { GetSiteResponse } from 'lemmy-js-client';
|
||||
import './styles.scss';
|
||||
|
||||
export class App extends Component<any, any> {
|
||||
export interface AppProps {
|
||||
site: GetSiteResponse;
|
||||
}
|
||||
|
||||
export class App extends Component<AppProps, any> {
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
}
|
||||
|
||||
/* <Provider i18next={i18n}> */
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<h1>Hi there!</h1>
|
||||
{/* <Provider i18next={i18n}> */}
|
||||
<div>
|
||||
<Navbar />
|
||||
<Navbar site={this.props.site} />
|
||||
<div class="mt-4 p-0 fl-1">
|
||||
<Switch>
|
||||
{routes.map(({ path, exact, component: C, ...rest }) => (
|
||||
|
|
@ -35,7 +40,6 @@ export class App extends Component<any, any> {
|
|||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
{/* </Provider> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,11 +15,17 @@ import {
|
|||
Site,
|
||||
} from 'lemmy-js-client';
|
||||
import { WebSocketService } from '../services';
|
||||
import { wsJsonToRes, toast, getPageFromProps } from '../utils';
|
||||
import {
|
||||
wsJsonToRes,
|
||||
toast,
|
||||
getPageFromProps,
|
||||
isBrowser,
|
||||
lemmyHttp,
|
||||
setAuth,
|
||||
} from '../utils';
|
||||
import { CommunityLink } from './community-link';
|
||||
import { i18n } from '../i18next';
|
||||
|
||||
declare const Sortable: any;
|
||||
import { IsoData } from 'shared/interfaces';
|
||||
|
||||
const communityLimit = 100;
|
||||
|
||||
|
|
@ -46,6 +52,9 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = this.emptyState;
|
||||
let isoData: IsoData;
|
||||
|
||||
if (isBrowser()) {
|
||||
this.subscription = WebSocketService.Instance.subject
|
||||
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
|
||||
.subscribe(
|
||||
|
|
@ -53,14 +62,27 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
err => console.error(err),
|
||||
() => console.log('complete')
|
||||
);
|
||||
isoData = window.isoData;
|
||||
} else {
|
||||
isoData = this.context.router.staticContext;
|
||||
}
|
||||
|
||||
this.state.site = isoData.site.site;
|
||||
|
||||
// Only fetch the data if coming from another route
|
||||
if (isoData.path == this.context.router.route.match.path) {
|
||||
this.state.communities = isoData.routeData[0].communities;
|
||||
this.state.loading = false;
|
||||
} else {
|
||||
this.refetch();
|
||||
WebSocketService.Instance.getSite();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (isBrowser()) {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props: any): CommunitiesProps {
|
||||
return {
|
||||
|
|
@ -226,6 +248,19 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
WebSocketService.Instance.listCommunities(listCommunitiesForm);
|
||||
}
|
||||
|
||||
static fetchInitialData(auth: string, path: string): Promise<any>[] {
|
||||
let pathSplit = path.split('/');
|
||||
let page = pathSplit[2] ? Number(pathSplit[2]) : 1;
|
||||
let listCommunitiesForm: ListCommunitiesForm = {
|
||||
sort: SortType.TopAll,
|
||||
limit: communityLimit,
|
||||
page,
|
||||
};
|
||||
setAuth(listCommunitiesForm, auth);
|
||||
|
||||
return [lemmyHttp.listCommunities(listCommunitiesForm)];
|
||||
}
|
||||
|
||||
parseMessage(msg: WebSocketJsonResponse) {
|
||||
console.log(msg);
|
||||
let res = wsJsonToRes(msg);
|
||||
|
|
@ -241,8 +276,6 @@ export class Communities extends Component<any, CommunitiesState> {
|
|||
this.state.loading = false;
|
||||
window.scrollTo(0, 0);
|
||||
this.setState(this.state);
|
||||
let table = document.querySelector('#community_table');
|
||||
Sortable.initTable(table);
|
||||
} else if (res.op == UserOperation.FollowCommunity) {
|
||||
let data = res.data as CommunityResponse;
|
||||
let found = this.state.communities.find(c => c.id == data.community.id);
|
||||
|
|
|
|||
|
|
@ -48,28 +48,28 @@ export class Footer extends Component<any, FooterState> {
|
|||
<li class="nav-item">
|
||||
<span class="navbar-text">{this.state.version}</span>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<Link class="nav-link" to="/modlog">
|
||||
<li className="nav-item">
|
||||
<Link className="nav-link" to="/modlog">
|
||||
{i18n.t('modlog')}
|
||||
</Link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<Link class="nav-link" to="/instances">
|
||||
<Link className="nav-link" to="/instances">
|
||||
{i18n.t('instances')}
|
||||
</Link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href={'/docs/index.html'}>
|
||||
<a className="nav-link" href={'/docs/index.html'}>
|
||||
{i18n.t('docs')}
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<Link class="nav-link" to="/sponsors">
|
||||
<Link className="nav-link" to="/sponsors">
|
||||
{i18n.t('donate')}
|
||||
</Link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href={repoUrl}>
|
||||
<a className="nav-link" href={repoUrl}>
|
||||
{i18n.t('code')}
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,10 @@ import {
|
|||
} from '../utils';
|
||||
import { i18n } from '../i18next';
|
||||
|
||||
interface NavbarProps {
|
||||
site: GetSiteResponse;
|
||||
}
|
||||
|
||||
interface NavbarState {
|
||||
isLoggedIn: boolean;
|
||||
expanded: boolean;
|
||||
|
|
@ -42,51 +46,25 @@ interface NavbarState {
|
|||
unreadCount: number;
|
||||
searchParam: string;
|
||||
toggleSearch: boolean;
|
||||
siteLoading: boolean;
|
||||
siteRes: GetSiteResponse;
|
||||
onSiteBanner?(url: string): any;
|
||||
}
|
||||
|
||||
export class Navbar extends Component<any, NavbarState> {
|
||||
export class Navbar extends Component<NavbarProps, NavbarState> {
|
||||
private wsSub: Subscription;
|
||||
private userSub: Subscription;
|
||||
private unreadCountSub: Subscription;
|
||||
private searchTextField: RefObject<HTMLInputElement>;
|
||||
emptyState: NavbarState = {
|
||||
isLoggedIn: false,
|
||||
isLoggedIn: !!this.props.site.my_user,
|
||||
unreadCount: 0,
|
||||
replies: [],
|
||||
mentions: [],
|
||||
messages: [],
|
||||
expanded: false,
|
||||
siteRes: {
|
||||
site: {
|
||||
id: null,
|
||||
name: null,
|
||||
creator_id: null,
|
||||
creator_name: null,
|
||||
published: null,
|
||||
number_of_users: null,
|
||||
number_of_posts: null,
|
||||
number_of_comments: null,
|
||||
number_of_communities: null,
|
||||
enable_downvotes: null,
|
||||
open_registration: null,
|
||||
enable_nsfw: null,
|
||||
icon: null,
|
||||
banner: null,
|
||||
creator_preferred_username: null,
|
||||
},
|
||||
my_user: null,
|
||||
admins: [],
|
||||
banned: [],
|
||||
online: null,
|
||||
version: null,
|
||||
federated_instances: null,
|
||||
},
|
||||
siteRes: this.props.site, // TODO this could probably go away
|
||||
searchParam: '',
|
||||
toggleSearch: false,
|
||||
siteLoading: true,
|
||||
};
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
|
|
@ -102,15 +80,31 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
() => console.log('complete')
|
||||
);
|
||||
|
||||
WebSocketService.Instance.getSite();
|
||||
// WebSocketService.Instance.getSite();
|
||||
|
||||
this.searchTextField = createRef();
|
||||
}
|
||||
|
||||
// The login
|
||||
if (this.props.site.my_user) {
|
||||
UserService.Instance.user = this.props.site.my_user;
|
||||
|
||||
if (isBrowser()) {
|
||||
WebSocketService.Instance.userJoin();
|
||||
// On the first load, check the unreads
|
||||
if (this.state.isLoggedIn == false) {
|
||||
this.requestNotificationPermission();
|
||||
this.fetchUnreads();
|
||||
// setTheme(data.my_user.theme, true);
|
||||
// i18n.changeLanguage(getLanguage());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (isBrowser()) {
|
||||
// Subscribe to jwt changes
|
||||
if (isBrowser()) {
|
||||
this.userSub = UserService.Instance.jwtSub.subscribe(res => {
|
||||
// A login
|
||||
if (res !== undefined) {
|
||||
|
|
@ -118,6 +112,7 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
} else {
|
||||
this.state.isLoggedIn = false;
|
||||
}
|
||||
console.log('a new login');
|
||||
WebSocketService.Instance.getSite();
|
||||
this.setState(this.state);
|
||||
});
|
||||
|
|
@ -137,16 +132,16 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
}
|
||||
|
||||
updateUrl() {
|
||||
/* const searchParam = this.state.searchParam; */
|
||||
/* this.setState({ searchParam: '' }); */
|
||||
/* this.setState({ toggleSearch: false }); */
|
||||
/* if (searchParam === '') { */
|
||||
/* this.context.router.history.push(`/search/`); */
|
||||
/* } else { */
|
||||
/* this.context.router.history.push( */
|
||||
/* `/search/q/${searchParam}/type/All/sort/TopAll/page/1` */
|
||||
/* ); */
|
||||
/* } */
|
||||
const searchParam = this.state.searchParam;
|
||||
this.setState({ searchParam: '' });
|
||||
this.setState({ toggleSearch: false });
|
||||
if (searchParam === '') {
|
||||
this.context.router.history.push(`/search/`);
|
||||
} else {
|
||||
this.context.router.history.push(
|
||||
`/search/q/${searchParam}/type/All/sort/TopAll/page/1`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
handleSearchSubmit(i: Navbar, event: any) {
|
||||
|
|
@ -185,15 +180,12 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
// TODO class active corresponding to current page
|
||||
navbar() {
|
||||
let user = UserService.Instance.user;
|
||||
let expandedClass = `${!this.state.expanded && 'collapse'} navbar-collapse`;
|
||||
|
||||
return (
|
||||
<nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
|
||||
<div class="container">
|
||||
{!this.state.siteLoading ? (
|
||||
<Link
|
||||
title={this.state.siteRes.version}
|
||||
class="d-flex align-items-center navbar-brand mr-md-3"
|
||||
className="d-flex align-items-center navbar-brand mr-md-3"
|
||||
to="/"
|
||||
>
|
||||
{this.state.siteRes.site.icon && showAvatars() && (
|
||||
|
|
@ -206,16 +198,9 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
)}
|
||||
{this.state.siteRes.site.name}
|
||||
</Link>
|
||||
) : (
|
||||
<div class="navbar-item">
|
||||
<svg class="icon icon-spinner spin">
|
||||
<use xlinkHref="#icon-spinner"></use>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
{this.state.isLoggedIn && (
|
||||
<Link
|
||||
class="ml-auto p-0 navbar-toggler nav-link border-0"
|
||||
className="ml-auto p-0 navbar-toggler nav-link border-0"
|
||||
to="/inbox"
|
||||
title={i18n.t('inbox')}
|
||||
>
|
||||
|
|
@ -238,16 +223,13 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
{/* TODO this isn't working
|
||||
className={`${!this.state.expanded && 'collapse'
|
||||
} navbar-collapse`}
|
||||
*/}
|
||||
{!this.state.siteLoading && (
|
||||
<div class="navbar-collapse">
|
||||
<div
|
||||
className={`${!this.state.expanded && 'collapse'} navbar-collapse`}
|
||||
>
|
||||
<ul class="navbar-nav my-2 mr-auto">
|
||||
<li class="nav-item">
|
||||
<Link
|
||||
class="nav-link"
|
||||
className="nav-link"
|
||||
to="/communities"
|
||||
title={i18n.t('communities')}
|
||||
>
|
||||
|
|
@ -256,7 +238,7 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
</li>
|
||||
<li class="nav-item">
|
||||
<Link
|
||||
class="nav-link"
|
||||
className="nav-link"
|
||||
to={{
|
||||
pathname: '/create_post',
|
||||
state: { prevPath: this.currentLocation },
|
||||
|
|
@ -268,7 +250,7 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
</li>
|
||||
<li class="nav-item">
|
||||
<Link
|
||||
class="nav-link"
|
||||
className="nav-link"
|
||||
to="/create_community"
|
||||
title={i18n.t('create_community')}
|
||||
>
|
||||
|
|
@ -277,7 +259,7 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
</li>
|
||||
<li className="nav-item">
|
||||
<Link
|
||||
class="nav-link"
|
||||
className="nav-link"
|
||||
to="/sponsors"
|
||||
title={i18n.t('donate_to_lemmy')}
|
||||
>
|
||||
|
|
@ -291,7 +273,7 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
{this.canAdmin && (
|
||||
<li className="nav-item">
|
||||
<Link
|
||||
class="nav-link"
|
||||
className="nav-link"
|
||||
to={`/admin`}
|
||||
title={i18n.t('admin_settings')}
|
||||
>
|
||||
|
|
@ -309,15 +291,13 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
class="form-inline"
|
||||
onSubmit={linkEvent(this, this.handleSearchSubmit)}
|
||||
>
|
||||
{/* TODO No idea why, but this class here fails
|
||||
<input
|
||||
class={`form-control mr-0 search-input ${
|
||||
this.state.toggleSearch ? 'show-input' : 'hide-input'
|
||||
}`}
|
||||
|
||||
*/}
|
||||
<input
|
||||
onInput={linkEvent(this, this.handleSearchParam)}
|
||||
value={this.state.searchParam}
|
||||
ref={this.searchTextField}
|
||||
type="text"
|
||||
placeholder={i18n.t('search')}
|
||||
onBlur={linkEvent(this, this.handleSearchBlur)}
|
||||
|
|
@ -339,7 +319,7 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
<ul class="navbar-nav my-2">
|
||||
<li className="nav-item">
|
||||
<Link
|
||||
class="nav-link"
|
||||
className="nav-link"
|
||||
to="/inbox"
|
||||
title={i18n.t('inbox')}
|
||||
>
|
||||
|
|
@ -357,7 +337,7 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
<ul class="navbar-nav">
|
||||
<li className="nav-item">
|
||||
<Link
|
||||
class="nav-link"
|
||||
className="nav-link"
|
||||
to={`/u/${user.name}`}
|
||||
title={i18n.t('settings')}
|
||||
>
|
||||
|
|
@ -382,7 +362,7 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
<ul class="navbar-nav my-2">
|
||||
<li className="ml-2 nav-item">
|
||||
<Link
|
||||
class="btn btn-success"
|
||||
className="btn btn-success"
|
||||
to="/login"
|
||||
title={i18n.t('login_sign_up')}
|
||||
>
|
||||
|
|
@ -392,7 +372,6 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
|
|
@ -405,7 +384,6 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
|
||||
parseMessage(msg: WebSocketJsonResponse) {
|
||||
let res = wsJsonToRes(msg);
|
||||
console.log(res);
|
||||
if (msg.error) {
|
||||
if (msg.error == 'not_logged_in') {
|
||||
UserService.Instance.logout();
|
||||
|
|
@ -462,7 +440,10 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
notifyPrivateMessage(data.message, this.context.router);
|
||||
}
|
||||
}
|
||||
} else if (res.op == UserOperation.GetSite) {
|
||||
}
|
||||
|
||||
// TODO all this needs to be moved
|
||||
else if (res.op == UserOperation.GetSite) {
|
||||
let data = res.data as GetSiteResponse;
|
||||
|
||||
this.state.siteRes = data;
|
||||
|
|
@ -480,11 +461,10 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
}
|
||||
this.state.isLoggedIn = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.state.siteLoading = false;
|
||||
this.setState(this.state);
|
||||
}
|
||||
}
|
||||
|
||||
fetchUnreads() {
|
||||
console.log('Fetching unreads...');
|
||||
|
|
|
|||
|
|
@ -1,17 +1,10 @@
|
|||
import { Component } from 'inferno';
|
||||
import { Helmet } from 'inferno-helmet';
|
||||
import { Subscription } from 'rxjs';
|
||||
import { retryWhen, delay, take } from 'rxjs/operators';
|
||||
import { WebSocketService } from '../services';
|
||||
import {
|
||||
GetSiteResponse,
|
||||
Site,
|
||||
WebSocketJsonResponse,
|
||||
UserOperation,
|
||||
} from 'lemmy-js-client';
|
||||
import { Site } from 'lemmy-js-client';
|
||||
import { i18n } from '../i18next';
|
||||
import { T } from 'inferno-i18next';
|
||||
import { repoUrl, wsJsonToRes, toast } from '../utils';
|
||||
import { repoUrl, isBrowser } from '../utils';
|
||||
import { IsoData } from 'shared/interfaces';
|
||||
|
||||
interface SilverUser {
|
||||
name: string;
|
||||
|
|
@ -51,30 +44,27 @@ interface SponsorsState {
|
|||
}
|
||||
|
||||
export class Sponsors extends Component<any, SponsorsState> {
|
||||
private subscription: Subscription;
|
||||
private emptyState: SponsorsState = {
|
||||
site: undefined,
|
||||
};
|
||||
constructor(props: any, context: any) {
|
||||
super(props, context);
|
||||
this.state = this.emptyState;
|
||||
this.subscription = WebSocketService.Instance.subject
|
||||
.pipe(retryWhen(errors => errors.pipe(delay(3000), take(10))))
|
||||
.subscribe(
|
||||
msg => this.parseMessage(msg),
|
||||
err => console.error(err),
|
||||
() => console.log('complete')
|
||||
);
|
||||
|
||||
WebSocketService.Instance.getSite();
|
||||
let isoData: IsoData;
|
||||
if (isBrowser()) {
|
||||
isoData = window.isoData;
|
||||
} else {
|
||||
isoData = this.context.router.staticContext;
|
||||
}
|
||||
|
||||
this.state.site = isoData.site.site;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (isBrowser()) {
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.subscription.unsubscribe();
|
||||
}
|
||||
|
||||
get documentTitle(): string {
|
||||
|
|
@ -103,9 +93,11 @@ export class Sponsors extends Component<any, SponsorsState> {
|
|||
<div>
|
||||
<h5>{i18n.t('donate_to_lemmy')}</h5>
|
||||
<p>
|
||||
{/* TODO
|
||||
<T i18nKey="sponsor_message">
|
||||
#<a href={repoUrl}>#</a>
|
||||
</T>
|
||||
*/}
|
||||
</p>
|
||||
<a class="btn btn-secondary" href="https://liberapay.com/Lemmy/">
|
||||
{i18n.t('support_on_liberapay')}
|
||||
|
|
@ -195,17 +187,4 @@ export class Sponsors extends Component<any, SponsorsState> {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
parseMessage(msg: WebSocketJsonResponse) {
|
||||
console.log(msg);
|
||||
let res = wsJsonToRes(msg);
|
||||
if (msg.error) {
|
||||
toast(i18n.t(msg.error), 'danger');
|
||||
return;
|
||||
} else if (res.op == UserOperation.GetSite) {
|
||||
let data = res.data as GetSiteResponse;
|
||||
this.state.site = data.site;
|
||||
this.setState(this.state);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
23
src/shared/components/styles.scss
Normal file
23
src/shared/components/styles.scss
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
|
||||
// import '../../assets/css/themes/darkly.min.css';
|
||||
@import '../../assets/css/tribute.css';
|
||||
@import '../../assets/css/toastify.css';
|
||||
@import '../../assets/css/choices.min.css';
|
||||
@import '../../assets/css/tippy.css';
|
||||
@import '../../assets/css/main.css';
|
||||
|
||||
// Bootstrap theme
|
||||
@import "../../assets/css/themes/_variables.darkly.scss";
|
||||
@import "../../../node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
// // Required
|
||||
// @import "../../../node_modules/bootstrap/scss/functions";
|
||||
// @import "../../../node_modules/bootstrap/scss/variables";
|
||||
// @import "../../../node_modules/bootstrap/scss/mixins";
|
||||
|
||||
// // Optional
|
||||
// @import "../../../node_modules/bootstrap/scss/reboot";
|
||||
// @import "../../../node_modules/bootstrap/scss/type";
|
||||
// @import "../../../node_modules/bootstrap/scss/images";
|
||||
// @import "../../../node_modules/bootstrap/scss/code";
|
||||
// @import "../../../node_modules/bootstrap/scss/grid";
|
||||
|
|
@ -13,3 +13,4 @@ const host = '192.168.50.60';
|
|||
const port = 8536;
|
||||
const endpoint = `${host}:${port}`;
|
||||
export const wsUri = `ws://${endpoint}/api/v1/ws`;
|
||||
export const httpUri = `http://${endpoint}/api/v1`;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,18 @@
|
|||
import { GetSiteResponse } from 'lemmy-js-client';
|
||||
|
||||
export interface IsoData {
|
||||
path: string;
|
||||
routeData: any[];
|
||||
site: GetSiteResponse;
|
||||
// communities?: ListCommunitiesResponse;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
isoData: IsoData;
|
||||
}
|
||||
}
|
||||
|
||||
export enum CommentSortType {
|
||||
Hot,
|
||||
Top,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
import { BrowserRouter, Route, Switch } from 'inferno-router';
|
||||
import { IRouteProps } from 'inferno-router/dist/Route';
|
||||
import { Main } from './components/main';
|
||||
import { Navbar } from './components/navbar';
|
||||
import { Footer } from './components/footer';
|
||||
import { Login } from './components/login';
|
||||
import { CreatePost } from './components/create-post';
|
||||
import { CreateCommunity } from './components/create-community';
|
||||
|
|
@ -20,7 +17,11 @@ import { Search } from './components/search';
|
|||
import { Sponsors } from './components/sponsors';
|
||||
import { Instances } from './components/instances';
|
||||
|
||||
export const routes: IRouteProps[] = [
|
||||
interface IRoutePropsWithFetch extends IRouteProps {
|
||||
fetchInitialData?(auth: string, path: string): Promise<any>[];
|
||||
}
|
||||
|
||||
export const routes: IRoutePropsWithFetch[] = [
|
||||
{ exact: true, path: `/`, component: Main },
|
||||
{
|
||||
path: `/home/data_type/:data_type/listing_type/:listing_type/sort/:sort/page/:page`,
|
||||
|
|
@ -36,8 +37,13 @@ export const routes: IRouteProps[] = [
|
|||
{
|
||||
path: `/communities/page/:page`,
|
||||
component: Communities,
|
||||
fetchInitialData: (auth, path) => Communities.fetchInitialData(auth, path),
|
||||
},
|
||||
{
|
||||
path: `/communities`,
|
||||
component: Communities,
|
||||
fetchInitialData: (auth, path) => Communities.fetchInitialData(auth, path),
|
||||
},
|
||||
{ path: `/communities`, component: Communities },
|
||||
{
|
||||
path: `/post/:id/comment/:comment_id`,
|
||||
component: Post,
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export class UserService {
|
|||
if (jwt) {
|
||||
this.setClaims(jwt);
|
||||
} else {
|
||||
setTheme();
|
||||
// setTheme();
|
||||
console.log('No JWT cookie found.');
|
||||
}
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@ export class UserService {
|
|||
this.claims = undefined;
|
||||
this.user = undefined;
|
||||
IsomorphicCookie.remove('jwt');
|
||||
setTheme();
|
||||
// setTheme();
|
||||
this.jwtSub.next();
|
||||
console.log('Logged out.');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -393,7 +393,7 @@ export class WebSocketService {
|
|||
this.ws.send(this.client.saveSiteConfig(form));
|
||||
}
|
||||
|
||||
private setAuth(obj: any, throwErr: boolean = true) {
|
||||
public setAuth(obj: any, throwErr: boolean = true) {
|
||||
obj.auth = UserService.Instance.auth;
|
||||
if (obj.auth == null && throwErr) {
|
||||
toast(i18n.t('not_logged_in'), 'danger');
|
||||
|
|
|
|||
|
|
@ -42,8 +42,11 @@ import {
|
|||
SearchResponse,
|
||||
CommentResponse,
|
||||
PostResponse,
|
||||
LemmyHttp,
|
||||
} from 'lemmy-js-client';
|
||||
|
||||
import { httpUri } from './env';
|
||||
|
||||
import { CommentSortType, DataType } from './interfaces';
|
||||
import { UserService, WebSocketService } from './services';
|
||||
|
||||
|
|
@ -74,6 +77,8 @@ export const postRefetchSeconds: number = 60 * 1000;
|
|||
export const fetchLimit: number = 20;
|
||||
export const mentionDropdownFetchLimit = 10;
|
||||
|
||||
export const lemmyHttp = new LemmyHttp(httpUri);
|
||||
|
||||
export const languages = [
|
||||
{ code: 'ca', name: 'Català' },
|
||||
{ code: 'en', name: 'English' },
|
||||
|
|
@ -450,18 +455,18 @@ export function setTheme(theme: string = 'darkly', loggedIn: boolean = false) {
|
|||
// }
|
||||
}
|
||||
|
||||
export function loadCss(id: string, loc: string) {
|
||||
if (!document.getElementById(id)) {
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
var link = document.createElement('link');
|
||||
link.id = id;
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = loc;
|
||||
link.media = 'all';
|
||||
head.appendChild(link);
|
||||
}
|
||||
}
|
||||
// export function loadCss(id: string, loc: string) {
|
||||
// if (!document.getElementById(id)) {
|
||||
// var head = document.getElementsByTagName('head')[0];
|
||||
// var link = document.createElement('link');
|
||||
// link.id = id;
|
||||
// link.rel = 'stylesheet';
|
||||
// link.type = 'text/css';
|
||||
// link.href = loc;
|
||||
// link.media = 'all';
|
||||
// head.appendChild(link);
|
||||
// }
|
||||
// }
|
||||
|
||||
export function objectFlip(obj: any) {
|
||||
const ret = {};
|
||||
|
|
@ -828,10 +833,7 @@ export function getPageFromProps(props: any): number {
|
|||
// return props.match.params.page ? Number(props.match.params.page) : 1;
|
||||
}
|
||||
|
||||
export function editCommentRes(
|
||||
data: CommentResponse,
|
||||
comments: Comment[]
|
||||
) {
|
||||
export function editCommentRes(data: CommentResponse, comments: Comment[]) {
|
||||
let found = comments.find(c => c.id == data.comment.id);
|
||||
if (found) {
|
||||
found.content = data.comment.content;
|
||||
|
|
@ -844,10 +846,7 @@ export function editCommentRes(
|
|||
}
|
||||
}
|
||||
|
||||
export function saveCommentRes(
|
||||
data: CommentResponse,
|
||||
comments: Comment[]
|
||||
) {
|
||||
export function saveCommentRes(data: CommentResponse, comments: Comment[]) {
|
||||
let found = comments.find(c => c.id == data.comment.id);
|
||||
if (found) {
|
||||
found.saved = data.comment.saved;
|
||||
|
|
@ -907,9 +906,7 @@ export function editPostRes(data: PostResponse, post: Post) {
|
|||
}
|
||||
}
|
||||
|
||||
export function commentsToFlatNodes(
|
||||
comments: Comment[]
|
||||
): CommentNodeI[] {
|
||||
export function commentsToFlatNodes(comments: Comment[]): CommentNodeI[] {
|
||||
let nodes: CommentNodeI[] = [];
|
||||
for (let comment of comments) {
|
||||
nodes.push({ comment: comment });
|
||||
|
|
@ -1109,3 +1106,9 @@ export function siteBannerCss(banner: string): string {
|
|||
export function isBrowser() {
|
||||
return typeof window !== 'undefined';
|
||||
}
|
||||
|
||||
export function setAuth(obj: any, auth: string) {
|
||||
if (auth) {
|
||||
obj.auth = auth;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"pretty": true,
|
||||
"target": "esnext",
|
||||
"module": "esnext",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"preserveConstEnums": true,
|
||||
"sourceMap": true,
|
||||
"inlineSources": true,
|
||||
"moduleResolution": "node",
|
||||
"lib": ["es2017", "dom"],
|
||||
"types": [
|
||||
"inferno"
|
||||
],
|
||||
"jsx": "preserve",
|
||||
"importHelpers": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"esModuleInterop": true
|
||||
"noUnusedLocals": true,
|
||||
"baseUrl": "./src",
|
||||
"noEmit": true,
|
||||
"skipLibCheck": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"exclude": ["node_modules", "fuse.ts"]
|
||||
"include": [
|
||||
"src/**/*",
|
||||
"node_modules/inferno/dist/index.d.ts"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
70
webpack.config.js
Normal file
70
webpack.config.js
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const nodeExternals = require('webpack-node-externals');
|
||||
const path = require('path');
|
||||
|
||||
module.exports = function (env, _) {
|
||||
const base = {
|
||||
// mode: "production",
|
||||
mode: 'development',
|
||||
entry: './src/server/index.tsx', // Point to main file
|
||||
output: {
|
||||
path: path.resolve(process.cwd(), 'dist'),
|
||||
filename: 'js/server.js',
|
||||
publicPath: '/',
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
||||
},
|
||||
performance: {
|
||||
hints: false,
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(scss|css)$/i,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'postcss-loader', // Run post css actions
|
||||
options: {
|
||||
plugins: function () {
|
||||
// post css plugins, can be exported to postcss.config.js
|
||||
return [require('precss'), require('autoprefixer')];
|
||||
},
|
||||
},
|
||||
},
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(js|jsx|tsx|ts)$/, // All ts and tsx files will be process by
|
||||
loaders: 'babel-loader', // first babel-loader, then ts-loader
|
||||
exclude: /node_modules/, // ignore node_modules
|
||||
},
|
||||
],
|
||||
},
|
||||
devServer: {
|
||||
host: '0.0.0.0',
|
||||
contentBase: 'src/',
|
||||
historyApiFallback: true,
|
||||
},
|
||||
plugins: [
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'styles/styles.css',
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
// server-specific configuration
|
||||
if (env.platform === 'server') {
|
||||
base.target = 'node';
|
||||
base.externals = [nodeExternals()];
|
||||
}
|
||||
// client-specific configurations
|
||||
if (env.platform === 'client') {
|
||||
base.entry = './src/client/index.tsx';
|
||||
base.output.filename = 'js/client.js';
|
||||
}
|
||||
return base;
|
||||
};
|
||||
Loading…
Reference in a new issue