Git Product home page Git Product logo

resource-boilerplate's Introduction

๐Ÿ“„ TypeScript Resource Boilerplate for MTASA

Write and compile TypeScript into MTASA-compatible Lua code.

A documentation in your IDE. Types safety. Linting.

Features

  • ๐Ÿ”ฅ TypeScriptToLua
    Provides compilation
  • ๐Ÿ““ MTASA Lua Types
    Provides types declarations and the documentation for MTASA functions, variables and classes
  • โœ… MTASA Lua Utils
    Provides code preparation and MTASA specific linting
  • โœ’๏ธ Prettier
    Code formatter
  • ๐Ÿ‘€ ESLint
    ESLint for linting TypeScript Code

๐ŸŽˆ Getting started

๐Ÿ’  NodeJS

This boilerplate requires NodeJS (at least 14.x) to be installed. If you already have NodeJS installed, skip this step.

Installation for Windows.

Installation for Linux:

Debian or Ubuntu

apt install nodejs

Arch or Manjaro

pacman -S nodejs

How to check NodeJS installation (and version)

Open console (What?) and execute the command

npm version

๐Ÿ†• Create new project (initialize boilerplate)

Open terminal in the parent folder of your new project and run folowwing command:

npx mtasa-lua-utils new-project

Structure

|- .idea/                     Configs for WebStorm
|- .github/                   Configs for GitHub
|- .vscode/                   Configs for VSCode
|- node_modules/              Modules for NodeJS (autogenerated directory)
|- src/                       Directory with TypeScript resources
    |- TypeScriptResource/    Example Resource
|- types/                     Directory with additional types
|- mtasa-meta.yml             Description for all resources (meta.xml analog)

All available commands

Compile the project

Command:

npm run build

Always running the command to build the resource is annoying. Below there are possible solutions to simplify it.

โœ Code Editor Preparation

VSCode

Using documentation

Ctrl+Mouse Hover is the shortcut to show documentation window.

Ctrl+Shift+Space is the shortcut to show function's parameters.

Tasks

Use Ctrl+Shift+B and select npm: build task to compilte the resource.

Trigger on save

Plugin Trigger Task On Save should be installed.

Configuration provided in .vscode/settings.json and will be enabled by default.

YAML Schema

Plugin YAML should be installed.

Provides helpful tips for mtasa-meta.yml file.

WebStorm

Using documentation

Ctrl+Q is the shortcut to show documentation window.

Ctrl+P is the shortcut to highlight function's parameters.

Configuration

NOTE: In the current version configuration should have been loaded by default.

In the top right corner press Edit Configurations. Press Add New Configuration (Plus icon), select npm and select build in Scripts field.

Configuration

Now you can press Shift+F10 to compile your resource.

File watcher

NOTE: In the current version file watcher should have been loaded by default.

Compile can be executed after file saving.

Open Settings -> Tools -> File watchers. Add new file watcher for TypeScript files in project scope. Put npm into the Script field and run build into the Srguments field.

File Watcher

Thus, saving after editing TypeScript files triggers compilation.

๐Ÿš Support

Discord Server

resource-boilerplate's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

resource-boilerplate's Issues

[Request] Create a tutorial

  • Preparations (nodejs install for linux and windows)
  • Bolierplate clone (or downloading and extracting)
  • Tutorial for WebStorm
  • Tutorial for VSCode

How will export work ?

Hey Tolaik,

I am currently working on database and I have to export a function. Can you please tell how can I export and use that export function in ts script ?

adding path using glob pattern inside meta.xml

Description

Passing folder path to 'files' inside meta.xml to add files by glob pattern (e.g. files: webui/build/**/* to recursively add all files contained in build folder and subfolders)

Is your feature request related to a problem? Please describe.

It will help to embed front-end frameworks for working with CEF (which generate many files)

[Request] VSCode auto import suggestions workaround

Description
Due to that issue VSCode does not support auto import suggestions.

Workaround
As mentioned here If there is a file with imports form module files, VSCode can index and suggest them.
Thus, the workaround is to create a file with empty imports from mtasa-lue-types module.

Create multiple resources

Is there a way to create and develop multiple resources is different folders and build them at the same time? (I don't want to clone this boilerplate for every single resource)

For example MTA SA default server has multiple folders and inside them are multiple resources.

Is there a simple way to do this or I have to write some special script for it?

Thanks.

Expression is not callable ERROR!!

I have written a small code

/** @noSelfInFile */

import { mtasa } from 'mtasa-lua-types/client';
import { EventNames } from 'mtasa-lua-types/client/event/all_event_names';
import { Event } from 'mtasa-lua-types/client/mtasa';




mtasa.addEventHandler<Event.OnClientPlayerJoin>(
    EventNames.OnClientPlayerJoin,
    mtasa.getRootElement(),
    function (){
        EventNames.OnClientPlayerSpawn(mtasa.Player,1959.55,-1714.46,10)
    }
);

Unfortunately I am getting a error
error-1
( see image )

Discord Server for quick support

Hy, I am actually interested in you project and have learned Typescript for scripting MTA:SA server.

Well there are many small problems and guides I need from you. So for small problems and guide, it would be not good to create issues for small problems. So I suggested to please make a discord server for quick support.

If you dont mind contact me on discord Vizzy#4868 , and allow me to create a discord server ,will make you owner and I will be as a Moderator

Thanks.

Using addEventHandler with class methods

Simple give class method to addEventHandler not working:

addEventHandler('onClientKey', root, this.blowOnSpace)

"Unable to convert function with a 'this' parameter to function 'handlerFunction' with no 'this'. To fix, wrap in an arrow function, or declare with 'this: void'."

If use 'this: void' - blowOnSpace lost 'this', so bad variant.
If use arrow function - its works:

addEventHandler('onClientKey', root, (...args: any) => { return this.blowOnSpace(...args) })

But have 2 problems:

  1. So lot code
  2. removeEventHandler require callback address

To save original callback address, callback must be save separate:

this.temp['somename'] = (...args: any) => { return this.blowOnSpace(...args) }
addEventHandler('onClientKey', root, this.temp['somename'])
//and then we can
removeEventHandler('onClientKey', root, this.temp['somename'])

So much code for simple operation...

I try make 'cahing method'

methodCache(callback: (...args: any) => void) {
   let name = `${callback}`
   if (!this.temp[name]) {
       /** @noSelf */
       this.temp[name] = (...args: any) => {
           return callback.bind(this)(...args)
       }
   }
   return this.temp[name]
}

and now its looks:

addEventHandler('onClientKey', root, this.methodCache(this.blowOnSpace))
removeEventHandler('onClientKey', root, this.methodCache(this.blowOnSpace))

But now i want methodCache per class... mb any idea to make it more simple ?

problem while running 'npm rum dev' โš ๏ธ

I have completed all the steps, but when I try to run 'npm run dev' command i got this error

"E:\mtasa_server_ts_project\server\mods\deathmatch\resources[typescript]\ts>npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\knowt\AppData\Roaming\npm-cache_logs\2021-09-07T07_29_22_853Z-debug.log
"

getting error while running build watch

`> Executing task: npm run build <

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Windows\System32\WindowsPowerShell\v1.0\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Windows\System32\WindowsPowerShell\v1.0\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\knowt\AppData\Roaming\npm-cache_logs\2021-09-11T08_29_20_039Z-debug.log
The terminal process "C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run build" terminated with exit code: 1.

Terminal will be reused by tasks, press any key to close it.

Executing task: npm run build <

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Windows\System32\WindowsPowerShell\v1.0\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Windows\System32\WindowsPowerShell\v1.0\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\knowt\AppData\Roaming\npm-cache_logs\2021-09-11T08_29_32_402Z-debug.log
The terminal process "C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run build" terminated with exit code: 1.`

โš ๏ธ Compiling error

Describe the bug

After compiling:

> build
> mtasa-lua-utils build

node_modules/lua-types/core/coroutine.d.ts(31,8): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/coroutine.d.ts(50,68): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/coroutine.d.ts(56,37): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/debug.d.ts(38,8): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/debug.d.ts(131,51): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/global.d.ts(37,4): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/global.d.ts(134,4): error TS2304: Cannot find name 'LuaIterable'.
node_modules/lua-types/core/global.d.ts(134,16): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/global.d.ts(153,52): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/global.d.ts(167,37): error TS2304: Cannot find name 'AnyNotNil'.
node_modules/lua-types/core/global.d.ts(168,8): error TS2304: Cannot find name 'LuaTable'.
node_modules/lua-types/core/global.d.ts(169,4): error TS2304: Cannot find name 'LuaIterable'.
node_modules/lua-types/core/global.d.ts(169,16): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/global.d.ts(170,34): error TS2304: Cannot find name 'LuaIterable'.
node_modules/lua-types/core/global.d.ts(170,46): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/global.d.ts(184,4): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/global.d.ts(189,4): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/global.d.ts(233,58): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/index.d.ts(1,23): error TS2688: Cannot find type definition file for '@typescript-to-lua/language-extensions'.
node_modules/lua-types/core/io.d.ts(63,8): error TS2304: Cannot find name 'LuaIterable'.
node_modules/lua-types/core/io.d.ts(64,9): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/io.d.ts(87,8): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/io.d.ts(101,53): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/io.d.ts(110,8): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/io.d.ts(144,51): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/io.d.ts(181,8): error TS2304: Cannot find name 'LuaIterable'.
node_modules/lua-types/core/io.d.ts(182,9): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/io.d.ts(217,8): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/io.d.ts(241,8): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/io.d.ts(265,42): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/math.d.ts(81,31): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/os.d.ts(111,40): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/os.d.ts(118,56): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/string.d.ts(29,55): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/string.d.ts(65,8): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/string.d.ts(124,50): error TS2304: Cannot find name 'LuaIterable'.
node_modules/lua-types/core/string.d.ts(124,62): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/string.d.ts(158,8): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/core/string.d.ts(180,64): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/special/5.1-only.d.ts(18,4): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/special/5.1-only.d.ts(24,47): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/special/5.1-only.d.ts(38,4): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/special/5.1-only.d.ts(55,4): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/special/5.1-only.d.ts(91,54): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/special/5.1-only.d.ts(96,8): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/special/5.1-or-jit.d.ts(22,52): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/special/5.1-or-jit.d.ts(23,63): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/special/5.1-or-jit.d.ts(102,33): error TS2304: Cannot find name 'LuaMultiReturn'.
node_modules/lua-types/special/5.1-or-jit.d.ts(103,36): error TS2304: Cannot find name 'LuaMultiReturn'.

A clear and concise description of what the bug is.

To Reproduce

Install this boilerplate

Screenshots

image

Desktop information

win11

NPM Version

{
  npm: '8.12.1',
  node: '16.15.1',
  v8: '9.4.146.24-node.21',
  uv: '1.43.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '93',
  nghttp2: '1.47.0',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '1.1.1o+quic',
  cldr: '40.0',
  icu: '70.1',
  tz: '2021a3',
  unicode: '14.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

NPM Package versions

test@ C:\MTA Server\server\mods\deathmatch\resources\[ZombiePlague]
โ”œโ”€โ”€ @typescript-eslint/[email protected]
โ”œโ”€โ”€ @typescript-eslint/[email protected]
โ”œโ”€โ”€ @typescript-to-lua/[email protected]
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ”œโ”€โ”€ [email protected]
โ””โ”€โ”€ [email protected]

Additional context

I fixed it by adding this line to tsconfig.json (and of course install it as dev)
image

โญ Prepare update for 1.0.0

There is an update 1.0.0 in progress.

The new resource boilerplate should contain:

  • mtasa-meta.yml prepared for example resource
  • VSCode configuration for plugins:
    • YAML (with setup for schema for mtasa-meta.yml)
    • TriggerTaskOnSave
  • WebStorm FileWatcher configuration
  • WebStorm configuration for schema
  • tsconfig.json, package.json with latest configuration
  • Example resource

Also I would like to add these features:

  • ESLint
  • Ignore some folders with prettier
  • No package-lock
  • GitHub Actions with prettier, eslint and build

problem while running 'npm rum dev' โš ๏ธ

I have completed all the steps, but when I try to run 'npm run dev' command i got this error

"E:\mtasa_server_ts_project\server\mods\deathmatch\resources[typescript]\ts>npm run dev
npm ERR! missing script: dev

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\knowt\AppData\Roaming\npm-cache_logs\2021-09-07T07_29_22_853Z-debug.log
"

Can't undertsand about how imports works

I have learned Typescript, but when I tried to learn scripting basics by seeing your example resources, I can't understand why you imports and what I have to import.

I have a request to make a Youtube video on how to script mta sa using typescript Or make a big documentation on it.

๐Ÿ“ƒ Wrong command Given

The command you given to make a new project that is npx mtasa-lua-utils new-project which is wrong. The actually command is npx mtasa-lua-utils@beta new-project

Error TS2304: Cannot find name 'https'

`node_modules/mtasa-lua-types/types/mtasa/client/function/event.d.ts:114:25 - error TS2304: Cannot find name 'https'.

114 export declare function addEventHandler(
~~~~~~~~~~~~~~~

node_modules/mtasa-lua-types/types/mtasa/client/function/output.d.ts:87:25 - error TS2304: Cannot find name 'https'.

87 export declare function outputChatBox(
~~~~~~~~~~~~~

node_modules/mtasa-lua-types/types/mtasa/client/function/utility.d.ts:1148:25 - error TS2304: Cannot find name 'https'.

1148 export declare function setTimer(
~~~~~~~~

node_modules/mtasa-lua-types/types/mtasa/client/function/world.d.ts:407:25 - error TS2304: Cannot find name 'https'.

407 export declare function getTime(): LuaMultiReturn<[
~~~~~~~

node_modules/mtasa-lua-types/types/mtasa/server/function/event.d.ts:97:25 - error TS2304: Cannot find name 'https'.

97 export declare function addEventHandler(
~~~~~~~~~~~~~~~

node_modules/mtasa-lua-types/types/mtasa/server/function/output.d.ts:67:25 - error TS2304: Cannot find name 'https'.

67 export declare function outputChatBox(
~~~~~~~~~~~~~

Found 6 errors. Watching for file changes.
`

Resolve: add declare var https: any to types/additional.d.ts

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.