mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-08 09:34:16 +00:00
Initial commit.
This commit is contained in:
commit
bf8a79e467
27
.gitignore
vendored
Normal file
27
.gitignore
vendored
Normal file
|
@ -0,0 +1,27 @@
|
|||
dist
|
||||
.fusebox
|
||||
_site
|
||||
.alm
|
||||
.history
|
||||
.git
|
||||
build
|
||||
.build
|
||||
.idea
|
||||
.jshintrc
|
||||
.nyc_output
|
||||
.sass-cache
|
||||
.vscode
|
||||
coverage
|
||||
jsconfig.json
|
||||
Gemfile.lock
|
||||
node_modules
|
||||
.DS_Store
|
||||
*.map
|
||||
*.log
|
||||
*.swp
|
||||
*~
|
||||
test/data/result.json
|
||||
|
||||
package-lock.json
|
||||
*.orig
|
||||
|
4
README.md
Normal file
4
README.md
Normal file
|
@ -0,0 +1,4 @@
|
|||
# lemmy-isomorphic-ui
|
||||
|
||||
A trial run at making an isomorphic UI for lemmy, based off of MrFoxPro's [inferno-isomorphic-template](https://github.com/MrFoxPro/inferno-isomorphic-template).
|
||||
|
76
fuse.ts
Normal file
76
fuse.ts
Normal file
|
@ -0,0 +1,76 @@
|
|||
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")
|
||||
.exec();
|
||||
});
|
||||
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("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"], () => {
|
||||
fuse.run();
|
||||
});
|
39
package.json
Normal file
39
package.json
Normal file
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"name": "lemmy-isomorphic-ui",
|
||||
"scripts": {
|
||||
"dev": "set NODE_ENV=development && node -r ts-node/register --inspect fuse.ts dev",
|
||||
"test": "node -r ts-node/register --inspect fuse.ts test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/serialize-javascript": "^4.0.0",
|
||||
"cookie-parser": "^1.4.3",
|
||||
"express": "~4.17.1",
|
||||
"inferno": "^7.4.3",
|
||||
"inferno-create-element": "^7.4.3",
|
||||
"inferno-hydrate": "^7.4.3",
|
||||
"inferno-router": "^7.4.3",
|
||||
"inferno-server": "^7.4.3",
|
||||
"serialize-javascript": "^4.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@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",
|
||||
"enzyme": "^3.3.0",
|
||||
"enzyme-adapter-inferno": "^1.3.0",
|
||||
"fuse-box": "3.7.1",
|
||||
"fuse-test-runner": "^1.0.16",
|
||||
"inferno-devtools": "^7.4.3",
|
||||
"inferno-test-utils": "^7.4.3",
|
||||
"jest": "^26.4.2",
|
||||
"jsdom": "16.4.0",
|
||||
"jsdom-global": "3.0.2",
|
||||
"ts-node": "^9.0.0",
|
||||
"ts-transform-classcat": "^1.0.0",
|
||||
"ts-transform-inferno": "^4.0.3",
|
||||
"tslint-react-recommended": "^1.0.15",
|
||||
"typescript": "^4.0.2"
|
||||
}
|
||||
}
|
10
src/client/components/About/About.css
Normal file
10
src/client/components/About/About.css
Normal file
|
@ -0,0 +1,10 @@
|
|||
.text {
|
||||
color: brown;
|
||||
font-size: 25pt;
|
||||
}
|
||||
.count {
|
||||
color: blue;
|
||||
}
|
||||
.button {
|
||||
color: red;
|
||||
}
|
19
src/client/components/About/About.test.tsx
Normal file
19
src/client/components/About/About.test.tsx
Normal file
|
@ -0,0 +1,19 @@
|
|||
import "jsdom-global/register";
|
||||
import { configure, mount, render, shallow } from "enzyme";
|
||||
import InfernoEnzymeAdapter = require("enzyme-adapter-inferno");
|
||||
import { should } from "fuse-test-runner";
|
||||
import { Component } from "inferno";
|
||||
import { renderToSnapshot } from "inferno-test-utils";
|
||||
import About from "./About";
|
||||
configure({ adapter: new InfernoEnzymeAdapter() });
|
||||
|
||||
export class AboutTest {
|
||||
public "Should be okay"() {
|
||||
const wrapper = mount(<About />);
|
||||
wrapper.find(".button").simulate("click");
|
||||
const countText = wrapper.find(".count").text();
|
||||
should(countText)
|
||||
.beString()
|
||||
.equal("1");
|
||||
}
|
||||
}
|
32
src/client/components/About/About.tsx
Normal file
32
src/client/components/About/About.tsx
Normal file
|
@ -0,0 +1,32 @@
|
|||
import { Component } from "inferno";
|
||||
import "./About.css";
|
||||
interface IState {
|
||||
clickCount: number;
|
||||
}
|
||||
interface IProps {}
|
||||
export default class About extends Component<IProps, IState> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
clickCount: 0
|
||||
};
|
||||
this.increment = this.increment.bind(this);
|
||||
}
|
||||
protected increment() {
|
||||
this.setState({
|
||||
clickCount: this.state.clickCount + 1
|
||||
});
|
||||
}
|
||||
public render() {
|
||||
return (
|
||||
<div>
|
||||
Simple Inferno SSR template
|
||||
<p className="text">Hello, world!</p>
|
||||
<button onClick={this.increment} className="button">
|
||||
Increment
|
||||
</button>
|
||||
<p className="count">{this.state.clickCount}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
36
src/client/components/App/App.tsx
Normal file
36
src/client/components/App/App.tsx
Normal file
|
@ -0,0 +1,36 @@
|
|||
import { Component, render } from "inferno";
|
||||
import { Link, Route, StaticRouter, Switch } from "inferno-router";
|
||||
import About from "../About/About";
|
||||
import Home from "../Home/Home";
|
||||
interface IState {}
|
||||
interface IProps {name: string}
|
||||
export default class App extends Component<IProps, IState> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
public render() {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<h3>{this.props.name}</h3>
|
||||
<div>
|
||||
<Link to="/Home">
|
||||
<p>Home</p>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/About" className="link">
|
||||
<p>About</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Switch>
|
||||
<Route exact path="/Home" component={Home} />
|
||||
<Route exact path="/About" component={About} />
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
22
src/client/components/Home/Home.tsx
Normal file
22
src/client/components/Home/Home.tsx
Normal file
|
@ -0,0 +1,22 @@
|
|||
import { Component } from "inferno";
|
||||
interface IState {}
|
||||
interface IProps {}
|
||||
export default class Home extends Component<IProps, IState> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
protected click() {
|
||||
/**
|
||||
* Try to debug next line
|
||||
*/
|
||||
console.log("hi");
|
||||
}
|
||||
public render() {
|
||||
return (
|
||||
<div>
|
||||
Home page
|
||||
<button onClick={this.click}>Click me</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
21
src/client/index.tsx
Normal file
21
src/client/index.tsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import { Component } from "inferno";
|
||||
import { hydrate } from 'inferno-hydrate';
|
||||
import { BrowserRouter } from "inferno-router";
|
||||
import App from "./components/App/App";
|
||||
import { initDevTools } from "inferno-devtools";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
isoData: {
|
||||
name: string,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const wrapper = (
|
||||
<BrowserRouter>
|
||||
<App name={window.isoData.name}/>
|
||||
</BrowserRouter>
|
||||
);
|
||||
initDevTools();
|
||||
hydrate(wrapper, document.getElementById("root"));
|
56
src/server/index.tsx
Normal file
56
src/server/index.tsx
Normal file
|
@ -0,0 +1,56 @@
|
|||
import cookieParser = require("cookie-parser");
|
||||
import * as serialize from "serialize-javascript";
|
||||
import * as express from "express";
|
||||
import { StaticRouter } from "inferno-router";
|
||||
import { renderToString } from "inferno-server";
|
||||
import path = require("path");
|
||||
import App from "../client/components/App/App";
|
||||
const server = express();
|
||||
const port = 1234;
|
||||
|
||||
server.use(express.json());
|
||||
server.use(express.urlencoded({ extended: false }));
|
||||
server.use("/static", express.static(path.resolve("./dist/client")));
|
||||
|
||||
server.use(cookieParser());
|
||||
|
||||
server.get("/*", (req, res) => {
|
||||
const context = {} as any;
|
||||
const isoData = {
|
||||
name: "fishing sux",
|
||||
}
|
||||
|
||||
const wrapper = (
|
||||
<StaticRouter location={req.url} context={context}>
|
||||
<App name={isoData.name} />
|
||||
</StaticRouter>
|
||||
);
|
||||
if (context.url) {
|
||||
return res.redirect(context.url);
|
||||
}
|
||||
|
||||
res.send(`
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My Universal App</title>
|
||||
<script>window.isoData = ${serialize(isoData)}</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id='root'>${renderToString(wrapper)}</div>
|
||||
<script src='./static/bundle.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
});
|
||||
let Server = server.listen(port, () => {
|
||||
console.log(`http://localhost:${port}`);
|
||||
});
|
||||
|
||||
/**
|
||||
* Used to restart server by fuseBox
|
||||
*/
|
||||
export async function shutdown() {
|
||||
Server.close();
|
||||
Server = undefined;
|
||||
}
|
12
tsconfig.json
Normal file
12
tsconfig.json
Normal file
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"target": "esnext",
|
||||
"sourceMap": true,
|
||||
"jsx": "preserve",
|
||||
"importHelpers": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true
|
||||
},
|
||||
"exclude": ["node_modules", "fuse.ts"]
|
||||
}
|
Loading…
Reference in a new issue