avior/nextjs-clone
1
0
Fork 0
mirror of https://github.com/Aviortheking/nextjs-clone.git synced 2025-04-22 10:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: updated

Browse Source 
Signed-off-by: Avior <github@avior.me>
This commit is contained in:
Florian Bouillon 2023-05-03 11:00:11 +02:00
parent e19db6ee5c
commit 3a8f50f0e3
Signed by: Florian Bouillon
GPG Key ID: BEEAF3722D0EBF64
12 changed files with 854 additions and 557 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
main.ts
View File

@ -58,9 +58,21 @@ let vite: ViteDevServer | null = null
const url = req.originalUrl const url = req.originalUrl
let template: string = index const template = await vite.transformIndexHtml(url, index)
if (vite) {
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) { if (!render) {
@ -85,7 +97,7 @@ let vite: ViteDevServer | null = null
// res.send(`<!DOCTYPE html>` + renderToString(<App><route.default {...props} /></App>)) // res.send(`<!DOCTYPE html>` + renderToString(<App><route.default {...props} /></App>))
}) })
server.listen(8080, () => { server.listen(3000, () => {
console.log('Server Started!') console.log('Server Started!')
}) })
})() })()

1247
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -1,7 +1,6 @@
{ {
"name": "test", "name": "test",
"version": "1.0.0", "version": "1.0.0",
"type": "module",
"scripts": { "scripts": {
"dev": "NODE_ENV=\"development\" ts-node-esm -T --project tsconfig.json main.ts", "dev": "NODE_ENV=\"development\" ts-node-esm -T --project tsconfig.json main.ts",
"build": "npm run build:client && npm run build:server", "build": "npm run build:client && npm run build:server",
@ -24,6 +23,7 @@
"@types/node": "^18.11.9", "@types/node": "^18.11.9",
"@types/react": "^18.0.24", "@types/react": "^18.0.24",
"@types/react-dom": "^18.0.8", "@types/react-dom": "^18.0.8",
"ts-node-dev": "^2.0.0",
"vite": "^3.2.2" "vite": "^3.2.2"
} }
} }

12
src/controllers/index.ts Normal file
View 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
View 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
View 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
View 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
View 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>

24
src/pages/_app.tsx
View File

@ -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} />
</>
)
}

18
src/pages/set.tsx
View File

@ -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')
}
}

10
src/pages/path.tsx → src/views/test.tsx
View File

@ -1,20 +1,16 @@
import React from 'react' import React from 'react'
import TCGdex from '@tcgdex/sdk' import TCGdex, { Card } from '@tcgdex/sdk'
import type { Card } from '@tcgdex/sdk'
export default class Component extends React.Component<{card: Card}> { export default class Component extends React.Component<{card: Card}> {
public componentDidMount(): void {
console.log('YaY')
}
public render = () => ( public render = () => (
<div>{this.props.card.name}</div> <div>{this.props.card.name}</div>
) )
} }
export const getServerProps = async () => { export const getServerProps = async () => {
const tcgdex = new TCGdex.default() const tcgdex = new TCGdex()
return { return {
card: await tcgdex.fetchCard('bw1-1') card: await tcgdex.fetchCard('bw1-1')
} }

5
tsconfig.json
View File

@ -1,5 +1,5 @@
{ {
//"extends": "./node_modules/@dzeio/config/tsconfig.base.json", "extends": "./node_modules/@dzeio/config/tsconfig.base.json",
"compilerOptions": { "compilerOptions": {
"jsx": "react-jsx", "jsx": "react-jsx",
"outDir": "dist", "outDir": "dist",
@ -32,6 +32,9 @@
"noImplicitReturns": true, "noImplicitReturns": true,
"noFallthroughCasesInSwitch": true "noFallthroughCasesInSwitch": true
}, },
"include": [
"src"
],
"files": [ "files": [
"main.ts" "main.ts"
], ],