sptc 0.0.20 → 0.0.21

package/README.md

@@ -73,3 +73,9 @@ module.exports={
 
 
 ```
+
+
+### sptcd-create-project
+```
+Run this command `sptcd-create-project` to create a sample web project that supports react server-side rendering. The sample project already contains commonly used codes, such as reading and writing databases, multi-page data interaction, routing, etc., so it is very suitable for full-stack projects that need to get started quickly.
+```

package/bin/sptcd-web.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+
+const {Command}=require('commander')
+const version=require('../package.json').version
+const program=new Command()
+  .name(`create web project`)
+  .description(`create web project`)
+  .version(version)
+  .requiredOption('-d, --dir <string>', 'Specify the project directory.', './sptc-web-demo')
+  .action(({
+    dir,
+  })=>{
+    const fs=require('fs-extra')
+    try{
+      fs.copySync(__dirname+'/../dist/sptc-web-demo', dir)
+      console.log()
+      console.log('New project created in `'+dir+'` !')
+      console.log('The following steps are necessary for developing:')
+      console.log('1. enter the project directory ', dir)
+      console.log('2. run `npm i` to install the requirements')
+      console.log('3. run `npm run dev` to start the demo')
+      console.log()
+    }catch(e) {
+      console.error(e)
+    }
+  })
+  .parse()

package/dist/sptc-web-demo/build/index.js

@@ -0,0 +1,24 @@
+const {getRuntimeArgv, checkEnv, run}=require(__dirname+'/lib')
+checkEnv()
+const {IS_DEV, IS_BUILD, IS_SERVE, NPM_ARGV_ORIGINAL}=getRuntimeArgv()
+
+process.env.NODE_ENV=IS_DEV? 'development': 'production'
+const {webpackDev, webpackBuild}=require(__dirname+'/webpack.lib')
+
+const nk='NODE_OPTIONS', nv='--openssl-legacy-provider'
+if(+process.version.match(/^v(\d+)/)[1]>16 && process.env[nk]!==nv) {
+  run('cross-env', [nk+'='+nv, 'npm', ...NPM_ARGV_ORIGINAL])
+}else{
+  const open=require('open')
+  if(IS_DEV) {
+    run('cross-env', 'sptcd_environ=dev sptcd -rindex.s -wserver'.split(' '))
+    webpackDev()
+    open('http://127.0.0.1:3000')
+  }else if(IS_BUILD) {
+    webpackBuild()
+  }else if(IS_SERVE) {
+    run('cross-env', 'sptcd_environ=beta sptcd -rindex.s -wserver -n2 -s'.split(' '))
+    console.log('-- The HTTP service is started with the address 127.0.0.1:9090 --')
+    open('http://127.0.0.1:9090')
+  }
+}

package/dist/sptc-web-demo/build/lib.js

@@ -0,0 +1,116 @@
+const APP_PATH=__dirname+'/..'
+const pkg=require(APP_PATH+'/package.json')
+const chalk=require('chalk')
+const fs=require('fs')
+
+const RUNTIME_RND_STR=Date.now().toString(36)
+function getRuntimeArgv() {
+  const p=process.argv[2]
+  const IS_DEV=p==='dev'
+  const IS_BUILD=p==='build'
+  const IS_SERVE=p==='serve'
+  const t=JSON.parse(process.env.npm_config_argv).original
+  let e={}
+  for(let s of t) {
+    s.replace(/^--(.+?)=(.+)/, (_, k, v)=>{
+      e[k]=v
+    })
+  }
+  return {
+    NPM_ARGV: e,
+    NPM_ARGV_ORIGINAL: t,
+    IS_DEV,
+    IS_BUILD,
+    IS_SERVE,
+    RND: RUNTIME_RND_STR,
+  }
+}
+
+function satisfiesVersion(target_v, custom_v) {
+  function _cmp(v1, v2, g=3) {
+    v1=v1.split('.').slice(0, g)
+    v2=v2.split('.').slice(0, g)
+    for(;v1.length<3;) v1.push(0)
+    for(;v2.length<3;) v2.push(0)
+    for(let i=0; i<3; i++) {
+      const _v1=parseInt(v1[i]) || 0, _v2=parseInt(v2[i]) || 0
+      if(_v1>_v2) return 1
+      if(_v1<_v2) return -1
+    }
+    return 0
+  }
+  if(target_v==='*' || target_v===custom_v) return true
+  let s=false
+  target_v.replace(/^(>=|>|\^|~)\s*(\S+)/, (_, x, t_ver)=>{
+    if(x==='>=') {
+      s=_cmp(custom_v, t_ver)>=0
+    }else if(x==='>') {
+      s=_cmp(custom_v, t_ver)>0
+    }else if(x==='<=') {
+      s=_cmp(custom_v, t_ver)<=0
+    }else if(x==='<') {
+      s=_cmp(custom_v, t_ver)<0
+    }else if(x==='^' || x==='~') {
+      s=_cmp(custom_v, t_ver)>=0
+      if(x==='^') {
+        s=s && _cmp(custom_v, t_ver.replace(/^\d+/, _=>+_+1), 1)<=0
+      }else{
+        s=s && _cmp(custom_v, t_ver.replace(/(^.+?\.)(\d+)/, (_, a, b)=>a+(+b+1)), 2)<=0
+      }
+    }
+  })
+  return s
+}
+
+function checkEnv() {
+  if(!satisfiesVersion(pkg.engines.node, process.version.replace(/^v/, ''))) {
+    console.log([
+      chalk.red('Node version not met :('),
+      chalk.yellow(`You are using Node ${process.version}. Node ${pkg.engines.node} is required.`),
+    ].join('\n'))
+    process.exit(1)
+  }
+
+  const unmatched=[]
+  const t=Object.assign({}, pkg.dependencies, pkg.devDependencies)
+  for(let n in t) {
+    let custom_v=''
+    try{
+      custom_v=require(APP_PATH+'/node_modules/'+n+'/package.json').version
+    }catch(e) {}
+    if(satisfiesVersion(t[n], custom_v)<=0) {
+      unmatched.push([n, t[n], custom_v])
+    }
+  }
+  if(unmatched.length) {
+    console.log(chalk.red(`The following packages should be installed:`))
+    for(let [name, tv, cv] of unmatched) {
+      console.log(`${name} required: ${tv} | current: ${cv || 'uninstalled'}`)
+    }
+    process.exit()
+  }
+}
+
+function getPostCssPlugins() {
+  return require("postcss-load-config").sync({}, __dirname+'/postcss.config.js')
+}
+
+function requireNodeModuleFile(fn) {
+  return require(APP_PATH+'/node_modules/'+fn)
+}
+
+function run(exe, argv) {
+  const p=require('child_process').spawn(
+    require('os').platform()==='win32'? exe+'.cmd': exe, argv)
+  p.stdout.on('data', b=>process.stdout.write(b))
+  p.stderr.on('data', b=>process.stderr.write(b))
+}
+
+module.exports={
+  APP_PATH,
+  getRuntimeArgv,
+  checkEnv,
+  getPostCssPlugins,
+  requireNodeModuleFile,
+  run,
+}

package/dist/sptc-web-demo/build/postcss.config.js

@@ -0,0 +1,31 @@
+var autoprefixer = require('autoprefixer')
+
+module.exports = {
+  plugins: [
+    autoprefixer({
+      overrideBrowserslist: [
+        'Android >= 4.0',
+        'iOS >= 6',
+        'last 5 QQAndroid versions',
+        'last 5 UCAndroid versions'
+      ],
+      cascade: true
+    }),
+    require("postcss-px-to-viewport")({
+      unitToConvert: 'px',
+      viewportWidth: 1875,
+      unitPrecision: 5,
+      propList: ['*'],
+      viewportUnit: 'rem',
+      fontViewportUnit: 'rem',
+      selectorBlackList: [],
+      minPixelValue: 1,
+      mediaQuery: false,
+      replace: true,
+      include: 'src/**',
+      landscape: false,
+      landscapeUnit: 'rem',
+      landscapeWidth: 568
+    })
+  ]
+};

package/dist/sptc-web-demo/build/sptc.inject.js

@@ -0,0 +1,73 @@
+const argv=require('./lib').getRuntimeArgv()
+
+function is_server(ctx) {
+  return (ctx.webpackLoaderThis.target + '').indexOf('node') > -1;
+}
+
+const A={
+  EXTENDS: (ctx) => ({
+    ...argv,
+    IS_NODE_TARGET: is_server(ctx),
+  }),
+  TPLS: [
+    /\.jsx?$/, ctx=>{
+      let {str, fn}=ctx
+      let appends={}
+      if (str.match(/<&[*=]/)) {
+        str=str.replace(/<(\/)?&([*=&])([^\s>]+)/g, (_, b, a, p) => {
+          appends[`import UseComponent from '@/components/UseComponent'`]=1
+          if(a==='*') {
+            if(b) return `</UseComponent`
+            return `<UseComponent key={"pathto_component_${p}"} UseComponentGetter={_=>import("${p}")}`
+          }else if(a==='=') {
+            appends[`import UseComponent from '@/components/UseComponent'`]=1
+            if(b) return `</UseComponent`
+            return `<UseComponent key={"pathto_component_${p}"} UseComponentSync={true} UseComponentGetter={_=>require("${p}")}`
+          } else if(a==='&') {
+            const name = `Comp_pathto_component_${p.replace(/[^a-z\d_]+/g, '_')}`
+            appends[`import ${name} from '${p}'`]=1
+            if(b) return `</${name}`
+            return `<${name}`
+          }
+        })
+        str=Object.keys(appends).join('\n')+'\n'+str
+      }
+      return str;
+    },
+
+    /\.jsx?$/, ctx=>{
+      let adds={}
+      let str=ctx.str.replace(/\*IMG\((['"])(.+?)\1\)/g, (_, a, pth)=>{
+        let e='IMG_'+pth.replace(/[^a-z\d_]+/g, '_')
+        adds[e]=pth
+        return e
+      })
+      for(let e in adds) {
+        str=`import ${e} from '${adds[e]}'\n`+str
+      }
+      return str
+    },
+
+    /\.jsx?/, ctx=>{
+      const {str, fn}=ctx
+      if(fn.match(/ssrInit.js/)) return str
+      if(!is_server(ctx)) return str
+      return `
+      import e from '@/ssrInit'
+      const {window, document, navigator,location}=e
+      `+str
+    },
+
+    /\.(scss|jsx?)/, ctx=>{
+      const {str, fn}=ctx
+      const path=require('path')
+      const src=path.resolve(__dirname+'/src')
+      const ffn=path.resolve(fn).substr(src.length).replace(/\.[a-z\d]+$/, '')
+      let t=ffn.replace(/[\/\\]+([^/\\]+)\.[^/\\]+$/, '').replace(/[^a-z\d_-]/ig, '_')
+      return str.replace(/\b__view_scope\b/g, 'V_'+argv.RND+'_'+t)
+    },
+
+  ],
+};
+
+module.exports=A

package/dist/sptc-web-demo/build/webpack.lib.js

@@ -0,0 +1,242 @@
+const {
+  APP_PATH,
+  getRuntimeArgv,
+  getPostCssPlugins,
+  requireNodeModuleFile,
+}=require(__dirname+'/lib')
+const craco=require('@craco/craco')
+const webpack=require('webpack')
+const Webpackbar=require('webpackbar')
+const chalk=require('chalk')
+const fs=require('fs')
+const MiniCssExtractPlugin=require('mini-css-extract-plugin')
+const fs_extra=require('fs-extra')
+const {NPM_ARGV}=getRuntimeArgv()
+const path=require('path')
+const createWebpackBase=requireNodeModuleFile('react-scripts/config/webpack.config')
+function createWebpackConfig({isServer=false, env='development'}) {
+  const IS_DEV=env==='development'
+  const webpackConfig={
+    target: !isServer? 'web': 'node',
+    name: !isServer? 'client': 'server',
+    mode: IS_DEV? 'development': 'production',
+    optimization: {
+      runtimeChunk: false,
+      splitChunks: false,
+    },
+  }
+  const base=createWebpackBase(env)
+  base.plugins.push(
+    new Webpackbar({
+      name: webpackConfig.name,
+      basic: false,
+    }),
+  )
+
+  craco.removePlugins(base, x=>[
+    'HtmlWebpackPlugin',
+    'ManifestPlugin',
+    'ESLintWebpackPlugin',
+  ].includes(x.constructor.name))
+
+  craco.removeLoaders(base, craco.loaderByName('style-loader'))
+  craco.getLoaders(base, craco.loaderByName('postcss-loader')).matches.map(e=>{
+    const _fn=e.loader.options.plugins
+    e.loader.options.plugins=_=>[..._fn(), ...getPostCssPlugins().plugins]
+  })
+  craco.getLoaders(base, craco.loaderByName('babel-loader')).matches.map(e=>{
+    e.loader.options.plugins=[]
+  })
+  base.module.rules.push({
+    test: /\.([tj]sx?|scss)/,
+    exclude: /node_modules/,
+    options: {
+      file: __dirname+'/sptc.inject.js',
+    },
+    loader: 'sptc/dist/webpack.loader.js',
+  })
+
+  if(isServer) {
+    craco.removePlugins(base, x=>[
+      'MiniCssExtractPlugin',
+      'InterpolateHtmlPlugin',
+      'InlineChunkHtmlPlugin',
+      'WebpackManifestPlugin',
+      'ReactRefreshPlugin',
+      'ForkTsCheckerWebpackPlugin',
+      'WatchMissingNodeModulesPlugin',
+      'ModuleNotFoundPlugin',
+      'ModuleScopePlugin',
+    ].includes(x.constructor.name))
+
+    craco.removeLoaders(base, craco.loaderByName('mini-css-extract-plugin'))
+    base.module.rules[1].oneOf.map(x=>{
+      if(x.test && ('.css'.match(x.test) || '.scss'.match(x.test))) {
+        x.use='null-loader'
+      }
+    })
+
+    base.resolve.plugins=[]
+    base.output.filename='server/index.js'
+    base.entry=APP_PATH+'/src/index.jsx';
+    base.output.chunkFilename='server/chunk.[contenthash].js';
+    base.output.libraryTarget='commonjs2';
+  }else{
+    if(IS_DEV) {
+      craco.removePlugins(base, craco.pluginByName('HotModuleReplacementPlugin'))
+      base.plugins.push(
+        new webpack.DefinePlugin('process', '{}'),
+        new webpack.HotModuleReplacementPlugin(),
+        new MiniCssExtractPlugin({
+          filename: 'static/css/[name].css',
+          chunkFilename: 'static/css/[name].chunk.css',
+        }),
+      )
+      base.module.rules[1].oneOf.map(rule=>{
+        if(!rule.use) return;
+        if(rule.use.find(x=>x.loader.indexOf('postcss-loader'))) {
+          rule.use.unshift({
+            loader: MiniCssExtractPlugin.loader,
+            options: {},
+          })
+        }
+      })
+    }
+    const newEntry=APP_PATH+'/src/index.jsx'
+    if(typeof base.entry==='string') {
+      base.entry=newEntry
+    }else if(Array.isArray(base.entry)) {
+      base.entry[base.entry.length-1]=newEntry
+    }
+  }
+
+  if(!IS_DEV) {
+    webpackConfig.externals=isServer? {
+      react: 'react',
+      'react-dom': 'react-dom',
+    }: {
+      react: 'React',
+      'react-dom': 'ReactDom',
+    }
+  }
+
+  base.resolve.alias=Object.assign(base.resolve.alias, {
+     '@': APP_PATH+'/src',
+     src: APP_PATH+'/src',
+  })
+  base.output.chunkCallbackName='webpackChunk_'+Date.now().toString(36)
+  base.output.jsonpFunction='webpackJsonp_'+Date.now().toString(36)
+  if(!IS_DEV) {
+    base.output.path=APP_PATH+'/dist'
+    base.output.publicPath='/assets/app/'
+  }
+  const conf=Object.assign(Object.assign({}, base), webpackConfig)
+  conf.devtool='none'
+  return conf
+}
+
+function webpackDev(port=3000) {
+  fs_extra.emptyDirSync(APP_PATH+'/dist')
+  const createDevBase=requireNodeModuleFile('react-scripts/config/webpackDevServer.config')
+  const devConfig=Object.assign({}, createDevBase(), {
+    writeToDisk: fn=>fn.indexOf('server')>0,
+    injectClient: true,
+    disableHostCheck: true,
+    index: '',
+    proxy: {
+      context: ['/'],
+      target: 'http://127.0.0.1:9090/',
+    },
+  })
+
+  const clientConfig=createWebpackConfig({isServer: false})
+  const serverConfig=createWebpackConfig({isServer: true})
+  const config=[clientConfig, serverConfig]
+  const multiCompiler=webpack(config)
+
+  multiCompiler.hooks.done.tap('done', stats=>{
+    const [clientStats, serverStats] = stats.toJson({
+      all: false,
+      warnings: true,
+      errors: true,
+      modules: false,
+      entrypoints: true,
+      publicPath: false,
+    }).children
+    const errors=[...clientStats.errors, ...serverStats.errors]
+    const warnings=[...clientStats.warnings, ...serverStats.warnings]
+
+    if(errors.length) {
+      console.log(chalk.red('Failed to compile.\n'))
+      console.log(errors[0])
+    }else if(warnings.length) {
+      console.log(chalk.yellow('Compiled with warnings.\n'))
+      console.log(warnings.join('\n\n'))
+    }else{
+      const hot=clientStats.entrypoints.main.assets.find(x=>x.endsWith('.hot-update.js'))
+      const ret={
+        srv: '/server/index.js',
+        js: '/static/js/bundle.js',
+        css: '/static/css/main.css',
+        hot: hot? '/'+hot: '',
+      }
+      fs.writeFileSync(APP_PATH+'/dist/assets.json', JSON.stringify(ret))
+
+      console.log(chalk.green('Compiled successfully!'))
+    }
+  })
+
+  const WebpackDevServer=require('webpack-dev-server')
+  const devServer=new WebpackDevServer(multiCompiler, devConfig)
+  devServer.listen(port, '0.0.0.0', e=>{
+    if(e) throw e
+    devServer.middleware.waitUntilValid(_=>{
+      console.log(`> Ready on http://0.0.0.0:${port}`)
+    })
+  })
+}
+
+function webpackBuild() {
+  fs_extra.emptyDirSync(APP_PATH+'/dist')
+  const clientConfig=createWebpackConfig({isServer: false, env: 'production'})
+  const serverConfig=createWebpackConfig({isServer: true, env: 'production'})
+  const config=[clientConfig, serverConfig]
+  const multiCompiler=webpack(config)
+
+  multiCompiler.run((err, multiStats)=>{
+    if(err) {
+      throw err
+    }
+    if(multiStats.hasErrors()) {
+      const message = multiStats.toJson({ all: false, errors: true }).errors.join('\n')
+      throw new Error(message)
+    }
+
+    const [clientStats]=multiStats.toJson({
+      all: false,
+      warnings: false,
+      errors: false,
+      modules: false,
+      entrypoints: true,
+      publicPath: false,
+    }).children
+    const _f=re=>clientStats.entrypoints.main.assets.find(x=>x.match(re))
+    const ret={
+      srv: 'server/index.js',
+      js: _f(/main\..+?\.js$/),
+      css: _f(/main\..+?\.css$/),
+    }
+    fs.writeFileSync(APP_PATH+'/dist/assets.json', JSON.stringify(ret))
+    const srv_dist=path.resolve(APP_PATH+'/server/public/app')
+    fs_extra.emptyDirSync(srv_dist)
+    fs_extra.moveSync(APP_PATH+'/dist', srv_dist, {overwrite: true})
+
+    console.info(multiStats.toString({ colors: true }))
+  })
+
+}
+
+module.exports={
+  webpackDev,
+  webpackBuild,
+}

package/dist/sptc-web-demo/package.json

@@ -0,0 +1,48 @@
+{
+  "scripts": {
+    "serve": "node build/index.js serve",
+    "build": "node build/index.js build",
+    "dev": "node build/index.js dev"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
+    "@craco/craco": "^6.1.1",
+    "bootstrap-icons": "^1.11.3",
+    "chalk": "^4.1.0",
+    "cross-env": "^7.0.3",
+    "fs-extra": "^10.1.0",
+    "mini-css-extract-plugin": "1.6.2",
+    "multiparty": "^4.2.3",
+    "node-fetch": "^3.3.2",
+    "null-loader": "^4.0.1",
+    "open": "^8.4.2",
+    "postcss": "^7.0.0",
+    "postcss-px-to-viewport": "^1.1.1",
+    "react": "16.10.1",
+    "react-dom": "16.10.1",
+    "react-scripts": "4.0.3",
+    "sass": "^1.69.5",
+    "sptc": "^0.0.20",
+    "sqlite": "^5.1.1",
+    "sqlite3": "^5.1.7",
+    "webpack-dev-server": "3.11.1",
+    "webpackbar": "^5.0.2"
+  },
+  "browserslist": {
+    "production": [
+      "> 1%",
+      "last 2 versions",
+      "not ie <= 8",
+      "Android >= 4.4",
+      "iOS >= 8"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">= 12.22.12"
+  }
+}

package/dist/sptc-web-demo/server/app/controllers/assets.s

@@ -0,0 +1,31 @@
+<?js
+class assetsController{
+  async indexAction() {
+    const fn='/'+$_REQUEST_FILE['subRoute'][1]
+    const path=require('path')
+    const fs=require('fs')
+    try{
+      return new Promise(done=>{
+        const _fn=__WEB__+'/'+path.resolve(fn)
+        const rs=fs.createReadStream(_fn)
+        defer(_=>rs.close())
+        const mime=({
+          '.js': 'application/x-javascript',
+          '.css': 'text/css',
+          '.jpg': 'image/jpeg',
+          '.png': 'image/png',
+          '.jpeg': 'image/jpeg',
+        })[path.parse(fn).ext] || 'application/octet-stream'
+        setResponseHeaders({
+          'content-type': mime,
+          'content-length': fs.statSync(_fn).size,
+        })
+        rs.on('data', buf=>echo(buf))
+        rs.on('end', done)
+        rs.on('error', done)
+      })
+    }catch(e) {
+      console.log(e)
+    }
+  }
+}

package/dist/sptc-web-demo/server/app/controllers/data.s

@@ -0,0 +1,39 @@
+<?js
+class dataController extends Lib_request{
+  constructor(data) {
+    super(data)
+  }
+  async getAppInfoAction() {
+    const v=new MessageModel
+    const data={}
+    data.requireSetup=await v.requireSetup()
+    Lib_response.json({data})
+  }
+  async setupAction() {
+    const v=new MessageModel
+    if(!v.requireSetup()) {
+      Lib_response.json({error: new Error('database exists')})
+      return
+    }
+    const [err]=await v.Setup()
+    Lib_response.json({error: err})
+  }
+  async listAction() {
+    const v=new MessageModel
+    const {begin_id}=await this.getRequestData()
+    const [err, msgs]=await v.getList(+begin_id)
+    Lib_response.json({data: msgs || [], error: err})
+  }
+  async addAction() {
+    const v=new MessageModel
+    const {msg}=await this.getRequestData()
+    const [err, data]=await v.add(msg)
+    Lib_response.json({data, error: err})
+  }
+  async detailAction() {
+    const v=new MessageModel
+    const {uuid}=await this.getRequestData()
+    const [err, data]=await v.detail(uuid)
+    Lib_response.json({data, error: err})
+  }
+}

package/dist/sptc-web-demo/server/app/controllers/error.s

@@ -0,0 +1,10 @@
+<?js
+class errorController{
+  constructor(e) {
+    this._e=e
+  }
+  indexAction() {
+    if(!isDebug()) return;
+    echo('<pre>', this._e.stack, '</pre>')
+  }
+}

package/dist/sptc-web-demo/server/app/controllers/ssr.s

@@ -0,0 +1,6 @@
+<?js
+class ssrController{
+  async indexAction() {
+    await Lib_ssr.render()
+  }
+}