framework7io / framework7-cli

Framework7 command line utility
https://framework7.io/cli/
MIT License
89 stars 44 forks source link

Add typescript support #50

Open frank-orellana opened 5 years ago

frank-orellana commented 5 years ago

I added typescript support to one of my projects, I believe it should not be that hard to add it out of the box in the templates, so you can use .ts files or add the lang="ts" to the scripts in .vue files, while still supporting all old js files. This is what I did to add the support:

  1. add ts-loader and typescript to package.json: npm i typescript ts-loader --save-dev
  2. add ts and tsx extensions to webpack.config.js:
    extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],
  3. Add ts-loader config to webpack.config.js
    module: {
    rules: [
    ...
    {
    test: /\.tsx?$/,
    loader: 'ts-loader',
    options: { appendTsSuffixTo: [/\.vue$/] }
    },
    {
    test: /\.vue$/,
    use: 'vue-loader',
    },
    ...
  4. Add tsconfig.json file:
    {
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node"
    }
    }
  5. Optional: Add the @babel/plugin-transform-runtime plugin to the babel.config.js file to support async and await keywords in js, I believe this plugin was there before but not sure why it was removed. If this is not added, it would be better to change the target in the previous tsconfig.json file to es5 instead of esnext.
  plugins: [
    'transform-vue-jsx',
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
  ]

Also related to this syntax, the oldest version of chrome and webview to support this, is the 55, so maybe when you are ready to drop support for android < 5.0 then this should be the minimum accepted in the browserlist. For the web, I would say chrome 55 should already be the minimum. Firefox 52 and Samsung 6.2 are also reasonable minimums.

I did these for a vue project, but I think it should work for other templates too.

peterlevel1 commented 4 years ago

It would be nice if providing some demos on a git repo, others would give it a try and help the author to do some testing work.

D-Marc1 commented 3 years ago

@nolimits4web Any chance TypeScript support be could be added to F7 cli? Seems like something that's really missing from it.

ThalesC commented 2 years ago

Any chance TypeScript support will be added to F7? Or am I missing something?

Fdavidtr commented 7 months ago

I was looking for the same =/