mirror of
https://github.com/Aviortheking/nextjs-clone.git
synced 2025-04-22 02:42:10 +00:00
feat: updated
Signed-off-by: Avior <github@avior.me>
This commit is contained in:
parent
e19db6ee5c
commit
3a8f50f0e3
GPG Key ID:
BEEAF3722D0EBF64
20
main.ts
20
main.ts
@ -58,9 +58,21 @@ let vite: ViteDevServer | null = null
|
||||
|
||||
const url = req.originalUrl
|
||||
|
||||
let template: string = index
|
||||
if (vite) {
|
||||
template = await vite.transformIndexHtml(url, index)
|
||||
const template = await vite.transformIndexHtml(url, index)
|
||||
|
||||
let render: ((url: Request) => Promise<string>) | null = null
|
||||
|
||||
if (isProd) {
|
||||
/** @ts-expect-error why not m*therfucker */
|
||||
const route: any = await import('./server/entry-server.js')
|
||||
render = route.render as any
|
||||
} else {
|
||||
const route = await vite.ssrLoadModule('/src/entry-server2.ts')
|
||||
render = route.render
|
||||
}
|
||||
|
||||
if (!render) {
|
||||
return res.status(500).end('Error')
|
||||
}
|
||||
|
||||
if (!render) {
|
||||
@ -85,7 +97,7 @@ let vite: ViteDevServer | null = null
|
||||
// res.send(`<!DOCTYPE html>` + renderToString(<App><route.default {...props} /></App>))
|
||||
})
|
||||
|
||||
server.listen(8080, () => {
|
||||
server.listen(3000, () => {
|
||||
console.log('Server Started!')
|
||||
})
|
||||
})()
|
||||
|
||||
1247
package-lock.json
generated
1247
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,6 @@
|
||||
{
|
||||
"name": "test",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "NODE_ENV=\"development\" ts-node-esm -T --project tsconfig.json main.ts",
|
||||
"build": "npm run build:client && npm run build:server",
|
||||
@ -24,6 +23,7 @@
|
||||
"@types/node": "^18.11.9",
|
||||
"@types/react": "^18.0.24",
|
||||
"@types/react-dom": "^18.0.8",
|
||||
"ts-node-dev": "^2.0.0",
|
||||
"vite": "^3.2.2"
|
||||
}
|
||||
}
|
||||
|
||||
12
src/controllers/index.ts
Normal file
12
src/controllers/index.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import TCGdex, { Card } from '@tcgdex/sdk'
|
||||
import Controller from '../interfaces/Controller'
|
||||
import Path from '../pages/path'
|
||||
|
||||
export default class Index extends Controller {
|
||||
public async render(req: any): Promise<string> {
|
||||
const tcgdex = new TCGdex()
|
||||
return this.renderReact(new Path({
|
||||
card: await tcgdex.fetchCard('bw1-1') as Card
|
||||
}))
|
||||
}
|
||||
}
|
||||
7
src/controllers/test.ts
Normal file
7
src/controllers/test.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { ControllerFunction } from '../interfaces/Controller'
|
||||
|
||||
const test: ControllerFunction = async () => {
|
||||
return 'pouet'
|
||||
}
|
||||
|
||||
export default test
|
||||
39
src/entry-server2.ts
Normal file
39
src/entry-server2.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { exists } from './Utils'
|
||||
import { Request } from 'express'
|
||||
import path from 'path'
|
||||
import { fileURLToPath } from 'url'
|
||||
import Controller, { ControllerFunction } from './interfaces/Controller'
|
||||
import ClassConstructor, { isClass } from './interfaces/ClassConstructor'
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
async function findFile(path: string): Promise<string | null> {
|
||||
const basePath = `${__dirname}/controllers${path}`
|
||||
if (await exists(basePath + '.ts')) {
|
||||
return basePath + '.ts'
|
||||
}
|
||||
if (await exists(basePath + '/index.ts')) {
|
||||
return basePath + '/index.ts'
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export const render = async (req: Request) => {
|
||||
const path = await findFile(req.path)
|
||||
console.log(req.path, __dirname, path)
|
||||
if (!path) {
|
||||
console.log('is404')
|
||||
return '404'
|
||||
}
|
||||
const route: ControllerFunction | ClassConstructor<Controller> = (await import(path)).default
|
||||
console.log(route)
|
||||
let res: string
|
||||
if (isClass(route)) {
|
||||
res = await new route().render(req)
|
||||
} else {
|
||||
res = await route(req)
|
||||
}
|
||||
// const props = await route.getServerProps()
|
||||
return (`<!DOCTYPE html>` + res)
|
||||
}
|
||||
12
src/interfaces/ClassConstructor.ts
Normal file
12
src/interfaces/ClassConstructor.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import { isClassDeclaration } from 'typescript'
|
||||
|
||||
export default interface ClassConstructor<T> {
|
||||
new (): T
|
||||
}
|
||||
|
||||
export function isClass<T>(cls: any): cls is ClassConstructor<T> {
|
||||
if (!cls.prototype) {
|
||||
return false
|
||||
}
|
||||
return Object.getOwnPropertyNames(cls.prototype).length > 1
|
||||
}
|
||||
15
src/interfaces/Controller.ts
Normal file
15
src/interfaces/Controller.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { Request } from 'express'
|
||||
import React, { ClassType, Component, createElement } from 'react'
|
||||
import { renderToString } from 'react-dom/server'
|
||||
|
||||
|
||||
|
||||
export default abstract class Controller {
|
||||
// public renderReact<T extends Component>(cls: T) {
|
||||
// return renderToString(<cls />)
|
||||
// }
|
||||
|
||||
abstract render(req: Request): Promise<string>
|
||||
}
|
||||
|
||||
export type ControllerFunction = (req: Request) => Promise<string>
|
||||
@ -1,24 +0,0 @@
|
||||
import React from 'react'
|
||||
import type { CommProps } from '../interfaces'
|
||||
|
||||
interface AppProps {
|
||||
component: any
|
||||
path: string
|
||||
pageProps: any
|
||||
}
|
||||
|
||||
export default class App extends React.Component<AppProps> {
|
||||
public render = () => (
|
||||
<>
|
||||
<script
|
||||
type='application/json'
|
||||
id="__PROPS"
|
||||
dangerouslySetInnerHTML={{__html: JSON.stringify({
|
||||
pageProps: this.props.pageProps,
|
||||
path: this.props.path
|
||||
} as CommProps)}}
|
||||
></script>
|
||||
<this.props.component {...this.props.pageProps} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
import React from 'react'
|
||||
import type { Set } from '@tcgdex/sdk'
|
||||
import TCGdex from '@tcgdex/sdk'
|
||||
|
||||
export default class Component extends React.Component<{card: Set}> {
|
||||
|
||||
public render = () => (
|
||||
<div onClick={() => console.log('YOLO')}>{this.props.card.name}</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export const getServerProps = async () => {
|
||||
const tcgdex = new TCGdex()
|
||||
return {
|
||||
card: await tcgdex.fetchSet('bw1')
|
||||
}
|
||||
}
|
||||
@ -1,20 +1,16 @@
|
||||
import React from 'react'
|
||||
import TCGdex from '@tcgdex/sdk'
|
||||
import type { Card } from '@tcgdex/sdk'
|
||||
import TCGdex, { Card } from '@tcgdex/sdk'
|
||||
|
||||
export default class Component extends React.Component<{card: Card}> {
|
||||
|
||||
public componentDidMount(): void {
|
||||
console.log('YaY')
|
||||
}
|
||||
|
||||
public render = () => (
|
||||
<div>{this.props.card.name}</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export const getServerProps = async () => {
|
||||
const tcgdex = new TCGdex.default()
|
||||
const tcgdex = new TCGdex()
|
||||
return {
|
||||
card: await tcgdex.fetchCard('bw1-1')
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
//"extends": "./node_modules/@dzeio/config/tsconfig.base.json",
|
||||
"extends": "./node_modules/@dzeio/config/tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"outDir": "dist",
|
||||
@ -32,6 +32,9 @@
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
],
|
||||
"files": [
|
||||
"main.ts"
|
||||
],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user