├── .github └── FUNDING.yml ├── .gitignore ├── .vscode └── pack-zip.js ├── build.mjs ├── dist └── main.js ├── docs └── Snippets.md ├── icon.png ├── package.json ├── plugin.json ├── pnpm-lock.yaml ├── readme.md ├── src ├── helpers.ts ├── htmltojsx.js ├── main.ts └── snippets.ts ├── tsconfig.json └── typings ├── acode.d.ts ├── dialogBox.d.ts ├── editorFile.d.ts ├── editorManager.d.ts ├── fileBrowser.d.ts ├── fsOperation.d.ts ├── index.d.ts └── settings.d.ts /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: bajrangCoder 4 | patreon: bajrangCoder 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: bajrangCoder 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist.zip -------------------------------------------------------------------------------- /.vscode/pack-zip.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const jszip = require('jszip'); 4 | 5 | const iconFile = path.join(__dirname, '../icon.png'); 6 | const pluginJSON = path.join(__dirname, '../plugin.json'); 7 | const distFolder = path.join(__dirname, '../dist'); 8 | let readmeDotMd = path.join(__dirname, '../readme.md'); 9 | 10 | if (!fs.existsSync(readmeDotMd)) { 11 | readmeDotMd = path.join(__dirname, '../README.md'); 12 | } 13 | 14 | // create zip file of dist folder 15 | 16 | const zip = new jszip(); 17 | 18 | zip.file('icon.png', fs.readFileSync(iconFile)); 19 | zip.file('plugin.json', fs.readFileSync(pluginJSON)); 20 | zip.file('readme.md', fs.readFileSync(readmeDotMd)); 21 | 22 | loadFile('', distFolder); 23 | 24 | zip 25 | .generateNodeStream({ type: 'nodebuffer', streamFiles: true }) 26 | .pipe(fs.createWriteStream(path.join(__dirname, '../dist.zip'))) 27 | .on('finish', () => { 28 | console.log('dist.zip written.'); 29 | }); 30 | 31 | function loadFile(root, folder) { 32 | const distFiles = fs.readdirSync(folder); 33 | distFiles.forEach((file) => { 34 | 35 | const stat = fs.statSync(path.join(folder, file)); 36 | 37 | if (stat.isDirectory()) { 38 | zip.folder(file); 39 | loadFile(path.join(root, file), path.join(folder, file)); 40 | return; 41 | } 42 | 43 | if (!/LICENSE.txt/.test(file)) { 44 | zip.file(path.join(root, file), fs.readFileSync(path.join(folder, file))); 45 | } 46 | }); 47 | } -------------------------------------------------------------------------------- /build.mjs: -------------------------------------------------------------------------------- 1 | import * as esbuild from "esbuild"; 2 | import { exec } from 'child_process'; 3 | 4 | let result = await esbuild.build({ 5 | entryPoints: ["./src/main.ts"], 6 | bundle: true, 7 | loader: { 8 | ".ts": "ts" 9 | }, 10 | splitting: true, 11 | format: "esm", 12 | minify: true, 13 | logLevel: 'info', 14 | color: true, 15 | outdir: "dist" 16 | }); 17 | 18 | exec("node .vscode/pack-zip.js", (err, stdout, stderr) => { 19 | if (err) { 20 | console.error(err); 21 | return; 22 | } 23 | console.log(stdout); 24 | }); -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | var C=Object.create;var y=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var b=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var w=(e,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of P(t))!S.call(e,p)&&p!==s&&y(e,p,{get:()=>t[p],enumerable:!(r=E(t,p))||r.enumerable});return e};var A=(e,t,s)=>(s=e!=null?C(R(e)):{},w(t||!e||!e.__esModule?y(s,"default",{value:e,enumerable:!0}):s,e));var $=b((k,u)=>{"use strict";var I=["accept","acceptCharset","accessKey","action","allowFullScreen","allowTransparency","alt","async","autoComplete","autoFocus","autoPlay","capture","cellPadding","cellSpacing","charSet","challenge","checked","classID","className","cols","colSpan","content","contentEditable","contextMenu","controls","coords","crossOrigin","data","dateTime","defer","dir","disabled","download","draggable","encType","form","formAction","formEncType","formMethod","formNoValidate","formTarget","frameBorder","headers","height","hidden","high","href","hrefLang","htmlFor","httpEquiv","icon","id","inputMode","keyParams","keyType","label","lang","list","loop","low","manifest","marginHeight","marginWidth","max","maxLength","media","mediaGroup","method","min","minLength","multiple","muted","name","noValidate","open","optimum","pattern","placeholder","poster","preload","radioGroup","readOnly","rel","required","role","rows","rowSpan","sandbox","scope","scoped","scrolling","seamless","selected","shape","size","sizes","span","spellCheck","src","srcDoc","srcSet","start","step","style","summary","tabIndex","target","title","type","useMap","value","width","wmode","wrap"];function M(e){var t=document.createElement("div");return t.innerHTML=e,t.children.length>1&&(e="
"+e+"
"),e=e.replace(/\sclass=/g," className=").replace(/\sfor=/g," htmlFor=").replace(//g,"*/}"),["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"].forEach(function(s){var r=new RegExp("<("+s+"[^/]*?)>","g");e=e.replace(r,function(p,f){return"<"+f+"/>"})}),I.forEach(function(s){var r=s.toLowerCase(),p=new RegExp("\\s"+r+"=","g");e=e.replace(p," "+s+"=")}),e=e.replace(/\sstyle="(.+?)"/g,function(s,r){var p=new m(r).toJSXString();return" style={{"+p+"}}"}),e}u.exports=M;function F(e){return e.replace(/-(.)/g,function(t,s){return s.toUpperCase()})}function L(e){return e!=null&&(typeof e=="number"||parseInt(e,10)==e)}var m=function(e){this.parse(e)};m.prototype={parse:function(e){this.styles={},e.split(";").forEach(function(t){t=t.trim();var s=t.indexOf(":"),r=t.substr(0,s),p=t.substr(s+1).trim();r!==""&&(this.styles[r]=p)},this)},toJSXString:function(){var e=[];for(var t in this.styles)this.styles.hasOwnProperty(t)&&e.push(this.toJSXKey(t)+": "+this.toJSXValue(this.styles[t]));return e.join(", ")},toJSXKey:function(e){return F(e)},toJSXValue:function(e){return L(e)?e:"'"+e.replace(/'/g,'"')+"'"}}});var i={id:"bajrangcoder.react.snippets",name:"Acode ES7+ React/Redux snippets",main:"dist/main.js",version:"1.0.2",readme:"readme.md",icon:"icon.png",files:[],minVersionCode:290,price:0,author:{name:"Raunak Raj",email:"bajrangcoders@gmail.com",url:"https://github.com/bajrangCoder/acode-react-snippets",github:"bajrangCoder"}};var T=A($());function h(e){let s=e.getMode().$id.split("/");return s[s.length-1]}function j(e){let t;return t=(0,T.default)(e),t}var g=[{prefix:"rcc",snippet:`import React, { Component } from 'react' 2 | 3 | export default class \${FILE_NAME} extends Component { 4 | render() { 5 | return ( 6 |
$1
7 | ) 8 | } 9 | `,type:"Components",description:"Creates a React component class with ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rce",snippet:`import React, { Component } from 'react' 10 | 11 | export class \${FILE_NAME} extends Component { 12 | render() { 13 | return ( 14 |
$1
15 | ) 16 | } 17 | } 18 | 19 | export default \${FILE_NAME}`,type:"Components",description:"Creates a React component class with ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rfce",snippet:`import React from 'react' 20 | 21 | const \${FILE_NAME} = () => { 22 | return ( 23 |
$1
24 | ) 25 | } 26 | 27 | export default \${FILE_NAME}`,type:"Components",description:"Creates a React Arrow Function component with ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rfc",snippet:`import React from 'react' 28 | 29 | export default function \${FILE_NAME}() { 30 | return ( 31 |
$1
32 | ) 33 | }`,type:"Components",description:"Creates a React Functional component with ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rfcp",snippet:`import React from 'react' 34 | import PropTypes from 'prop-types' 35 | 36 | function \${FILE_NAME}(props) { 37 | return ( 38 |
$1
39 | ) 40 | } 41 | 42 | \${FILE_NAME}.propTypes = {} 43 | 44 | export default \${FILE_NAME}`,type:"Components",description:"Creates a React Functional component with PropTypes and ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rafce",snippet:`import React from 'react' 45 | 46 | const \${FILE_NAME} = () => { 47 | return ( 48 |
$1
49 | ) 50 | } 51 | 52 | export default \${FILE_NAME}`,type:"Components",description:"Creates a React Arrow Function component with ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rafc",snippet:`import React from 'react' 53 | 54 | export const \${FILE_NAME} = () => { 55 | return ( 56 |
$1
57 | ) 58 | }`,type:"Components",description:"Creates a React Arrow Function component with ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rafcp",snippet:`import React from 'react' 59 | import PropTypes from 'prop-types' 60 | 61 | const \${FILE_NAME} = props => { 62 | return ( 63 |
$1
64 | ) 65 | } 66 | 67 | \${FILE_NAME}.propTypes = {} 68 | 69 | export default \${FILE_NAME}`,type:"Components",description:"Creates a React Arrow Function component with PropTypes and ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rcep",snippet:`import React, { Component } from 'react' 70 | import PropTypes from 'prop-types' 71 | 72 | export class \${FILE_NAME} extends Component { 73 | static propTypes = {} 74 | render() { 75 | return ( 76 |
$1
77 | ) 78 | } 79 | } 80 | 81 | export default \${FILE_NAME}`,type:"Components",description:"Creates a React component class with PropTypes and ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rpc",snippet:`import React, { PureComponent } from 'react' 82 | 83 | export default class \${FILE_NAME} extends PureComponent { 84 | render() { 85 | return ( 86 |
$1
87 | ) 88 | } 89 | }`,type:"Components",description:"Creates a React pure component class with ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rpce",snippet:`import React, { PureComponent } from 'react' 90 | 91 | export class \${FILE_NAME} extends PureComponent { 92 | render() { 93 | return ( 94 |
$1
95 | ) 96 | } 97 | } 98 | 99 | export default \${FILE_NAME}`,type:"Components",description:"Creates a React pure component class with ES7 module system export",fileTypes:["jsx","tsx"]},{prefix:"rpcp",snippet:`import React, { PureComponent } from 'react' 100 | import PropTypes from 'prop-types' 101 | 102 | export default class \${FILE_NAME} extends PureComponent { 103 | static propTypes = {} 104 | render() { 105 | return ( 106 |
$1
107 | ) 108 | } 109 | }`,type:"Components",description:"Creates a React pure component class with PropTypes and ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rmc",snippet:`import React, { memo } from 'react' 110 | 111 | const \${FILE_NAME} = memo(() => { 112 | return ( 113 |
$1
114 | ) 115 | }) 116 | 117 | export default \${FILE_NAME}`,type:"Components",description:"Creates a React Memo Function component with ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rmcp",snippet:`import React, { memo } from 'react' 118 | import PropTypes from 'prop-types' 119 | 120 | const \${FILE_NAME} = memo((props) => { 121 | return ( 122 |
$1
123 | ) 124 | }) 125 | 126 | \${FILE_NAME}.propTypes = {} 127 | 128 | export default \${FILE_NAME}`,type:"Components",description:"Creates a React Memo Function component with PropTypes and ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rccp",snippet:`import React, { Component } from 'react' 129 | import PropTypes from 'prop-types' 130 | 131 | export default class \${FILE_NAME} extends Component { 132 | static propTypes = {\${1:first} 133 | } 134 | render() { 135 | return ( 136 |
$2
137 | ) 138 | } 139 | }`,type:"Components",description:"Creates a React component class with PropTypes and ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rcredux",snippet:`import React, { Component } from 'react' 140 | import { connect } from 'react-redux' 141 | 142 | export class \${FILE_NAME} extends Component { 143 | render() { 144 | return ( 145 |
$1
146 | ) 147 | } 148 | } 149 | 150 | const mapStateToProps = (state) => ({}) 151 | 152 | const mapDispatchToProps = {} 153 | 154 | export default connect(mapStateToProps, mapDispatchToProps)(\${FILE_NAME})`,type:"Components",description:"Creates a React component class with connected redux and ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rcreduxp",snippet:`import React, { Component } from 'react' 155 | import PropTypes from 'prop-types' 156 | import { connect } from 'react-redux' 157 | 158 | export class \${FILE_NAME} extends Component { 159 | static propTypes = {\${1:first} 160 | } 161 | render() { 162 | return ( 163 |
$2
164 | ) 165 | } 166 | } 167 | 168 | const mapStateToProps = (state) => ({}) 169 | 170 | const mapDispatchToProps = {} 171 | 172 | export default connect(mapStateToProps, mapDispatchToProps)(\${FILE_NAME})`,type:"Components",description:"Creates a React component class with PropTypes, connected redux and ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rfcredux",snippet:`import React from 'react' 173 | import { connect } from 'react-redux' 174 | 175 | const \${FILE_NAME} = (props) => { 176 | return ( 177 |
$1
178 | ) 179 | } 180 | 181 | const mapStateToProps = (state) => ({}) 182 | 183 | const mapDispatchToProps = {} 184 | 185 | export default connect(mapStateToProps, mapDispatchToProps)(\${FILE_NAME})`,type:"Components",description:"Creates a React functional component with connected redux and ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"rfcreduxp",snippet:`import React from 'react' 186 | import PropTypes from 'prop-types' 187 | import { connect } from 'react-redux' 188 | 189 | const \${FILE_NAME} = (props) => { 190 | return ( 191 |
$1
192 | ) 193 | } 194 | 195 | const mapStateToProps = (state) => ({}) 196 | 197 | const mapDispatchToProps = {} 198 | 199 | \${FILE_NAME}.propTypes = {\${2:second} 200 | } 201 | 202 | export default connect(mapStateToProps, mapDispatchToProps)(\${FILE_NAME})`,type:"Components",description:"DEPRECATED: Creates a React functional component with PropTypes, connected redux and ES7 module system",fileTypes:["jsx","tsx"]},{prefix:"useEffectSnippet",snippet:`useEffect(() => { 203 | \${1:first} 204 | return () => { 205 | \${2:second} 206 | } 207 | }, [\${3:third}]) 208 | `,type:"Hooks",fileTypes:["jsx","tsx"]},{prefix:"useContextSnippet",snippet:"const ${1:first} = useContext(${2:second})",type:"Hooks",fileTypes:["jsx","tsx"]},{prefix:"useStateSnippet",snippet:"const [${1:first}, set${1:first}] = useState(${2:second})",type:"Hooks",fileTypes:["jsx","tsx"]},{prefix:"useReducerSnippet",snippet:"const [state, dispatch] = useReducer(${1:first}, ${2:second}, ${3:third})",type:"Hooks",fileTypes:["jsx","tsx"]},{prefix:"useCallbackSnippet",snippet:`useCallback( 209 | () => { 210 | \${1:first} 211 | }, 212 | [\${2:second}], 213 | ) 214 | `,type:"Hooks",fileTypes:["jsx","tsx"]},{prefix:"useMemoSnippet",snippet:"useMemo(() => ${1:first}, [${2:second}])",type:"Hooks",fileTypes:["jsx","tsx"]},{prefix:"useRefSnippet",snippet:"const ${1:first} = useRef(${2:second})",type:"Hooks",fileTypes:["jsx","tsx"]},{prefix:"useImperativeHandleSnippet",snippet:`useImperativeHandle( 215 | \${1:first}, 216 | () => { 217 | \${2:second} 218 | }, 219 | [\${3:third}], 220 | ) 221 | `,type:"Hooks",fileTypes:["jsx","tsx"]},{prefix:"useLayoutEffectSnippet",snippet:`useLayoutEffect(() => { 222 | \${1:first} 223 | 224 | return () => { 225 | \${2:second} 226 | }; 227 | }, [\${3:third}]) 228 | `,type:"Hooks",fileTypes:["jsx","tsx"]},{prefix:"imr",snippet:"import React from 'react'",type:"ImportReact",fileTypes:["jsx","tsx"]},{prefix:"imrd",snippet:"import ReactDOM from 'react-dom'",type:"ImportReactDom",fileTypes:["jsx","tsx"]},{prefix:"imrc",snippet:"import React, { Component } from 'react'",type:"ImportReactWithComponent",fileTypes:["jsx","tsx"]},{prefix:"imrcp",snippet:`import React, { Component } from 'react' 229 | import PropTypes from 'prop-types'`,type:"ImportReactWithComponentAndPropTypes",fileTypes:["jsx","tsx"]},{prefix:"imrpc",snippet:"import React, { PureComponent } from 'react'",type:"ImportReactWithPureComponent",fileTypes:["jsx","tsx"]},{prefix:"imrpcp",snippet:`import React, { PureComponent } from 'react' 230 | import PropTypes from 'prop-types'`,type:"ImportReactWithPureComponent&PropTypes",fileTypes:["jsx","tsx"]},{prefix:"imrm",snippet:"import React, { memo } from 'react'",type:"ImportReactWithMemo",fileTypes:["jsx","tsx"]},{prefix:"imrmp",snippet:`import React, { memo } from 'react' 231 | import PropTypes from 'prop-types'`,type:"ImportReactWithMemo&PropTypes",fileTypes:["jsx","tsx"]},{prefix:"impt",snippet:"import PropTypes from 'prop-types'",type:"ImportPropTypes",fileTypes:["jsx","tsx"]},{prefix:"imbr",snippet:"import { BrowserRouter as Router } from 'react-router-dom'",type:"ReactRouter",fileTypes:["jsx","tsx"]},{prefix:"imrr",snippet:"import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'",type:"ReactRouterWithRouteAndNavLink",fileTypes:["jsx","tsx"]},{prefix:"imbrc",snippet:"import { Route, Switch, NavLink, Link } from 'react-router-dom'",type:"ImportRouterSetup",fileTypes:["jsx","tsx"]},{prefix:"imbrs",snippet:"import { Switch } from 'react-router-dom'",type:"ImportRouterSwitch",fileTypes:["jsx","tsx"]},{prefix:"imbrl",snippet:"import { Link } from 'react-router-dom'",type:"ImportRouterLink",fileTypes:["jsx","tsx"]},{prefix:"imbrnl",snippet:"import { NavLink } from 'react-router-dom'",type:"ImportRouterNavLink",fileTypes:["jsx","tsx"]},{prefix:"imp",snippet:"import ${2:Name} from '${1:first}'",type:"Import",fileTypes:["jsx","tsx"]},{prefix:"imn",snippet:"import '${1:first}'",type:"ImportNoModuleName",fileTypes:["jsx","tsx"]},{prefix:"imd",snippet:"import { ${2:Component} } from '${1:first}'",type:"ImportDestructing",fileTypes:["jsx","tsx"]},{prefix:"ime",snippet:"import * as ${2:comp} from '${1:first}'",type:"ImportEverything",fileTypes:["jsx","tsx"]},{prefix:"ima",snippet:"import { ${2:Component} as ${3:third} } from '${1:first}'",type:"ImportAs",fileTypes:["jsx","tsx"]},{prefix:"req",snippet:"const ${1:packageName} = require('${1:package}')",type:"RequireToConst",description:"Require a package to const",fileTypes:["tsx","javascript"]},{prefix:"exp",snippet:"export default ${1:first}",type:"ExportDefault",fileTypes:["jsx","tsx"]},{prefix:"exd",snippet:"export { ${2:second} } from '${1:first}'",type:"ExportDestructing",fileTypes:["jsx","tsx"]},{prefix:"exa",snippet:"export { ${2:second} as ${3:third} } from '${1:first}'",type:"ExportAs",fileTypes:["jsx","tsx"]},{prefix:"enf",snippet:"export const ${1:first} = (${2:second}) => {${3:third}}",type:"ExportNamedFunction",description:"Export named function",fileTypes:["jsx","tsx","javascript"]},{prefix:"edf",snippet:"export default (${1:first}) => {${2:second}}",type:"ExportDefaultFunction",description:"Export default function",fileTypes:["jsx","tsx"]},{prefix:"ednf",snippet:"export default function ${1:first}(${2:second}) {${3:third}}",type:"ExportDefaultNamedFunction",description:"Export default named function",fileTypes:["jsx","tsx","javascript"]},{prefix:"met",snippet:"${1:first} = (${2:second}) => {${3:third}}",type:"Method",description:"Creates a method inside a class",fileTypes:["jsx","tsx","javascript"]},{prefix:"pge",snippet:"get ${1:first}() {\n return this.${2:second}\n}",type:"PropertyGet",description:"Creates a getter property inside a class",fileTypes:["jsx","tsx","javascript"]},{prefix:"pse",snippet:"set ${1:first}(${2:second}) {${3:third}}",type:"PropertySet",description:"Creates a setter property inside a class",fileTypes:["jsx","tsx","javascript"]},{prefix:"fre",snippet:"${1:first}.forEach(${2:second} => {${3:third}})",type:"ForEach",description:"Creates a forEach statement",fileTypes:["jsx","tsx","javascript"]},{prefix:"fof",snippet:"for(let ${1:first} of ${2:second}) {${3:third}}",type:"ForOf",description:"Iterating over property names of iterable objects",fileTypes:["jsx","tsx","javascript"]},{prefix:"fin",snippet:"for(let ${1:first} in ${2:second}) {${3:third}}",type:"ForIn",description:"Iterating over property values of iterable objects",fileTypes:["jsx","tsx","javascript"]},{prefix:"anfn",snippet:"(${1:first}) => { ${2:second} }",type:"AnonymousFunction",description:"Creates an anonymous function",fileTypes:["jsx","tsx","javascript"]},{prefix:"nfn",snippet:"const ${1:first} = (${2:second}) => { ${3:third} }",type:"NamedFunction",description:"Creates a named function",fileTypes:["jsx","tsx","javascript"]},{prefix:"dob",snippet:"const {${2:second}} = ${1:first}",type:"DestructingObject",description:"Creates and assigns a local variable using object destructing",fileTypes:["jsx","tsx","javascript"]},{prefix:"dar",snippet:"const [${2:second}] = ${1:first}",type:"DestructingArray",description:"Creates and assigns a local variable using array destructing",fileTypes:["jsx","tsx","javascript"]},{prefix:"sti",snippet:"setInterval(() => { ${1:first} }, ${2:second})",type:"SetInterval",description:"Executes the given function at specified intervals",fileTypes:["jsx","tsx","javascript"]},{prefix:"sto",snippet:"setTimeout(() => { ${1:first} }, ${2:second})",type:"SetTimeOut",description:"Executes the given function after the specified delay",fileTypes:["jsx","tsx","javascript"]},{prefix:"prom",snippet:"return new Promise((resolve, reject) => { ${1:first} })",type:"Promise",description:"Creates and returns a new Promise in the standard ES7 syntax",fileTypes:["jsx","tsx","javascript"]},{prefix:"cp",snippet:"const { ${1:first} } = this.props",type:"DestructProps",description:"Creates and assigns a local variable using props destructing",fileTypes:["jsx","tsx"]},{prefix:"cs",snippet:"const { ${1:first} } = this.state",type:"DestructState",description:"Creates and assigns a local variable using state destructing",fileTypes:["jsx","tsx"]},{prefix:"rconst",snippet:`constructor(props) { 232 | super(props) 233 | this.state = { 234 | \${1:first} 235 | } 236 | }`,type:"ClassConstructor",description:"Adds a default constructor for it('', () => {})the class that contains props as arguments",fileTypes:["jsx","tsx"]},{prefix:"est",snippet:"state = { ${1:first} }",type:"EmptyState",description:"Creates empty state object. To be used in a constructor.",fileTypes:["jsx","tsx"]},{prefix:"cdm",snippet:"componentDidMount() { ${1:first} }",type:"ComponentDidMount",description:"Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.",fileTypes:["jsx","tsx"]},{prefix:"scu",snippet:"shouldComponentUpdate(nextProps, nextState) { ${1:first} }",type:"ShouldComponentUpdate",description:"Invoked before rendering when new props or state are being received. ",fileTypes:["jsx","tsx"]},{prefix:"cdup",snippet:"componentDidUpdate(prevProps, prevState) { ${1:first}}",type:"ComponentDidUpdate",description:"Invoked immediately after the component's updates are flushed to the DOM.",fileTypes:["jsx","tsx"]},{prefix:"cwun",snippet:"componentWillUnmount() {${1:first} }",type:"ComponentWillUnmount",description:"Invoked immediately before a component is unmounted from the DOM.",fileTypes:["jsx","tsx"]},{prefix:"gdsfp",snippet:"static getDerivedStateFromProps(props, state) {${1:first}}",type:"GetDerivedStateFromProps",description:"Invoked right before calling the render method, both on the initial mount and on subsequent updates.",fileTypes:["jsx","tsx"]},{prefix:"gsbu",snippet:"getSnapshotBeforeUpdate = (prevProps, prevState) => {${1:first}}",type:"GetSnapshotBeforeUpdate",description:"Called right before mutations are made (e.g. before the DOM is updated)",fileTypes:["jsx","tsx"]},{prefix:"rcontext",snippet:"const ${1:first} = React.createContext()",type:"CreateContext",description:"Create React context",fileTypes:["jsx","tsx"]},{prefix:"cref",snippet:"this.${1:first}Ref = React.createRef()",type:"CreateRef",description:"Create ref statement used inside constructor",fileTypes:["jsx","tsx"]},{prefix:"sst",snippet:"this.setState((state, props) => { return { ${1:first} }})",type:"ComponentSetStateObject",description:"Performs a shallow merge of nextState into current state",fileTypes:["jsx","tsx"]},{prefix:"ssf",snippet:"this.setState((state, props) => { return { ${1:first} }})",type:"ComponentSetStateFunc",description:"Performs a shallow merge of nextState into current state",fileTypes:["jsx","tsx"]},{prefix:"props",snippet:"this.props.${1:first}",type:"ComponentProps",description:"Access component's props",fileTypes:["jsx","tsx"]},{prefix:"state",snippet:"this.state.${1:first}",type:"ComponentState",fileTypes:["jsx","tsx"]},{prefix:"bnd",snippet:"this.${1:first} = this.${1:first}.bind(this)",type:"BindThis",description:"Binds this to a method",fileTypes:["jsx","tsx"]},{prefix:"cmmb",snippet:`/** 237 | * \${1:first} 238 | */`,type:"CommentBigBlock",fileTypes:["jsx","tsx"]},{prefix:"hocredux",snippet:`import React from 'react' 239 | import { connect } from 'react-redux' 240 | import PropTypes from 'prop-types' 241 | 242 | export const mapStateToProps = state => ({}) 243 | 244 | export const mapDispatchToProps = {} 245 | 246 | export const \${1:first} = (WrappedComponent) => { 247 | const hocComponent = ({ ...props }) => 248 | 249 | hocComponent.propTypes = {} 250 | 251 | return hocComponent 252 | } 253 | 254 | export default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(\${1:first}(WrapperComponent)) 255 | `,type:"HocComponentWithRedux",fileTypes:["jsx","tsx"]},{prefix:"hoc",snippet:`import React from 'react' 256 | import PropTypes from 'prop-types' 257 | 258 | export default (WrappedComponent) => { 259 | const hocComponent = ({ ...props }) => 260 | 261 | hocComponent.propTypes = {} 262 | 263 | return hocComponent 264 | } 265 | `,type:"HocComponent",fileTypes:["jsx","tsx"]},{prefix:"tpf",snippet:"typeof ${1:first}",type:"TypeofSnippet",fileTypes:["jsx","tsx","javascript"]},{prefix:"call",snippet:"${1:method}.call(${2:context}, ${3:arguments})",type:"method",description:"Calls the function with the specified object as the this value and the specified rest arguments as the arguments.",fileTypes:["jsx","tsx","javascript"]},{prefix:"apply",snippet:"${1:method}.apply(${2:context}, ${3:arguments})",type:"method",description:"Calls the function with the specified object as the this value and the elements of specified array as the arguments.",fileTypes:["jsx","tsx","javascript"]},{prefix:"jp",snippet:"JSON.parse(${1:obj})",type:"JSON",description:"Converts a JavaScript Object Notation (JSON) string into an object",fileTypes:["jsx","tsx","javascript"]},{prefix:"js",snippet:"JSON.stringify(${1:obj})",type:"JSON",description:"Converts a JavaScript value to a JavaScript Object Notation (JSON) string.",fileTypes:["jsx","tsx","javascript"]},{prefix:"us",snippet:"'use strict'",type:"use strict",description:"Use Javascript strict mode",fileTypes:["tsx","javascript"]},{prefix:"al",snippet:"alert('${1:message}')",type:"alert",fileTypes:["jsx","tsx","javascript"]},{prefix:"pr",snippet:"prompt('${1:message}')",type:"prompt",fileTypes:["jsx","tsx","javascript"]},{prefix:"cf",snippet:"confirm('${1:msg}');",type:"confirm",fileTypes:["jsx","tsx","javascript"]},{prefix:"cas",snippet:"console.assert(${1:first}, ${2:second})",type:"ConsoleAssert",description:"If the specified expression is false, the message is written to the console along with a stack trace",fileTypes:["jsx","tsx","javascript"]},{prefix:"ccl",snippet:"console.clear()",type:"ConsoleClear",description:"Clears the console",fileTypes:["jsx","tsx","javascript"]},{prefix:"cco",snippet:"console.count(${1:first})",type:"ConsoleCount",description:"Writes the the number of times that count() has been invoked at the same line and with the same label",fileTypes:["jsx","tsx","javascript"]},{prefix:"cdi",snippet:"console.dir(${1:first})",type:"ConsoleDir",description:"Prints a JavaScript representation of the specified object",fileTypes:["jsx","tsx","javascript"]},{prefix:"cer",snippet:"console.error(${1:first})",type:"ConsoleError",description:"Displays a message in the console and also includes a stack trace from where the method was called",fileTypes:["jsx","tsx","javascript"]},{prefix:"cgr",snippet:"console.group('${1:first}')",type:"ConsoleGroup",description:"Groups and indents all following output by an additional level, until console.groupEnd() is called.",fileTypes:["jsx","tsx","javascript"]},{prefix:"cge",snippet:"console.groupEnd()",type:"ConsoleGroupEnd",description:"Closes out the corresponding console.group().",fileTypes:["jsx","tsx","javascript"]},{prefix:"clg",snippet:"console.log(${1:first})",type:"ConsoleLog",description:"Displays a message in the console",fileTypes:["jsx","tsx","javascript"]},{prefix:"ctr",snippet:"console.trace(${1:first})",type:"ConsoleTrace",description:"Prints a stack trace from the point where the method was called",fileTypes:["jsx","tsx","javascript"]},{prefix:"clo",snippet:"console.log('${1:first}', ${2:second})",type:"ConsoleLogObject",description:"Logs property with name.",fileTypes:["jsx","tsx","javascript"]},{prefix:"clj",snippet:"console.log('${1:first}', JSON.stringify(${1:first}, null, 2))",type:"ConsoleLogJson",description:"Logs stringified JSON property with name.",fileTypes:["jsx","tsx","javascript"]},{prefix:"ctm",snippet:"console.time('${1:first}')",type:"ConsoleTime",description:"Console time wrapper",fileTypes:["jsx","tsx","javascript"]},{prefix:"cte",snippet:"console.timeEnd('${1:first}')",type:"ConsoleTimeEnd",description:"Console time end wrapper",fileTypes:["jsx","tsx","javascript"]},{prefix:"cwa",snippet:"console.warn(${1:first})",type:"ConsoleWarn",description:"Displays a message in the console but also displays a yellow warning icon along with the logged message",fileTypes:["jsx","tsx","javascript"]},{prefix:"cin",snippet:"console.info(${1:first})",type:"ConsoleInfo",description:"Displays a message in the console but also displays a blue information icon along with the logged message",fileTypes:["jsx","tsx","javascript"]},{prefix:"ctl",snippet:"console.table([${1:first}])",type:"ConsoleTable",description:"Logs table to console",fileTypes:["jsx","tsx","javascript"]},{prefix:"pta",snippet:"PropTypes.array",type:"PropTypeArray",description:"Array prop type",fileTypes:["jsx","tsx"]},{prefix:"ptar",snippet:"PropTypes.array.isRequired",type:"PropTypeArrayRequired",description:"Array prop type required",fileTypes:["jsx","tsx"]},{prefix:"ptb",snippet:"PropTypes.bool",type:"PropTypeBool",description:"Bool prop type",fileTypes:["jsx","tsx"]},{prefix:"ptbr",snippet:"PropTypes.bool.isRequired",type:"PropTypeBoolRequired",description:"Bool prop type required",fileTypes:["jsx","tsx"]},{prefix:"ptf",snippet:"PropTypes.func",type:"PropTypeFunc",description:"Func prop type",fileTypes:["jsx","tsx"]},{prefix:"ptfr",snippet:"PropTypes.func.isRequired",type:"PropTypeFuncRequired",description:"Func prop type required",fileTypes:["jsx","tsx"]},{prefix:"ptn",snippet:"PropTypes.number",type:"PropTypeNumber",description:"Number prop type",fileTypes:["jsx","tsx"]},{prefix:"ptnr",snippet:"PropTypes.number.isRequired",type:"PropTypeNumberRequired",description:"Number prop type required",fileTypes:["jsx","tsx"]},{prefix:"pto",snippet:"PropTypes.object",type:"PropTypeObject",description:"Object prop type",fileTypes:["jsx","tsx"]},{prefix:"ptor",snippet:"PropTypes.object.isRequired",type:"PropTypeObjectRequired",description:"Object prop type required",fileTypes:["jsx","tsx"]},{prefix:"pts",snippet:"PropTypes.string",type:"PropTypeString",description:"String prop type",fileTypes:["jsx","tsx"]},{prefix:"ptsr",snippet:"PropTypes.string.isRequired",type:"PropTypeStringRequired",description:"String prop type required",fileTypes:["jsx","tsx"]},{prefix:"ptnd",snippet:"PropTypes.node",type:"PropTypeNode",description:"Anything that can be rendered: numbers, strings, elements or an array",fileTypes:["jsx","tsx"]},{prefix:"ptndr",snippet:"PropTypes.node.isRequired",type:"PropTypeNodeRequired",description:"Anything that can be rendered: numbers, strings, elements or an array required",fileTypes:["jsx","tsx"]},{prefix:"ptel",snippet:"PropTypes.element",type:"PropTypeElement",description:"React element prop type",fileTypes:["jsx","tsx"]},{prefix:"ptelr",snippet:"PropTypes.element.isRequired",type:"PropTypeElementRequired",description:"React element prop type required",fileTypes:["jsx","tsx"]},{prefix:"pti",snippet:"PropTypes.instanceOf(${1:ClassName})",type:"PropTypeInstanceOf",description:"Is an instance of a class prop type",fileTypes:["jsx","tsx"]},{prefix:"ptir",snippet:"PropTypes.instanceOf(${1:ClassName}).isRequired",type:"PropTypeInstanceOfRequired",description:"Is an instance of a class prop type required",fileTypes:["jsx","tsx"]},{prefix:"pte",snippet:"PropTypes.oneOf(['${1:value1}', '${2:value2}'])",type:"PropTypeEnum",description:"Prop type limited to specific values by treating it as an enum",fileTypes:["jsx","tsx"]},{prefix:"pter",snippet:"PropTypes.oneOf(['${1:value1}', '${2:value2}']).isRequired",type:"PropTypeEnumRequired",description:"Prop type limited to specific values by treating it as an enum required",fileTypes:["jsx","tsx"]},{prefix:"ptet",snippet:`PropTypes.oneOfType([ 266 | \${1:PropTypes.string}, 267 | \${2:PropTypes.number}, 268 | \${3:PropTypes.bool} 269 | ])`,type:"PropTypeOneOfType",description:"An object that could be one of many types",fileTypes:["jsx","tsx"]},{prefix:"ptetr",snippet:`PropTypes.oneOfType([ 270 | \${1:PropTypes.string}, 271 | \${2:PropTypes.number}, 272 | \${3:PropTypes.bool} 273 | ]).isRequired`,type:"PropTypeOneOfTypeRequired",description:"An object that could be one of many types required",fileTypes:["jsx","tsx"]},{prefix:"ptao",snippet:"PropTypes.arrayOf(${1:PropTypes.string})",type:"PropTypeArrayOf",description:"An array of a certain type",fileTypes:["jsx","tsx"]},{prefix:"ptaor",snippet:"PropTypes.arrayOf(${1:PropTypes.string}).isRequired",type:"PropTypeArrayOfRequired",description:"An array of a certain type required",fileTypes:["jsx","tsx"]},{prefix:"ptoo",snippet:"PropTypes.objectOf(${1:PropTypes.number})",type:"PropTypeObjectOf",description:"An object with property values of a certain type",fileTypes:["jsx","tsx"]},{prefix:"ptoor",snippet:"PropTypes.objectOf(${1:PropTypes.number}).isRequired",type:"PropTypeObjectOfRequired",description:"An object with property values of a certain type required",fileTypes:["jsx","tsx"]},{prefix:"ptsh",snippet:"PropTypes.shape({\n ${1:propertyName}: ${2:PropTypes.string},\n ${3:propertyName2}: ${4:PropTypes.number}\n})",type:"PropTypeShape",description:"An object taking on a particular shape",fileTypes:["jsx","tsx"]},{prefix:"ptshr",snippet:"PropTypes.shape({\n ${1:propertyName}: ${2:PropTypes.string},\n ${3:propertyName2}: ${4:PropTypes.number}\n}).isRequired",type:"PropTypeShapeRequired",description:"An object taking on a particular shape required",fileTypes:["jsx","tsx"]},{prefix:"ptex",snippet:"PropTypes.exact({\n ${1:propertyName}: ${2:PropTypes.string},\n ${3:propertyName2}: ${4:PropTypes.number}\n})",type:"PropTypeExact",description:"An object with warnings on extra properties",fileTypes:["jsx","tsx"]},{prefix:"ptexr",snippet:"PropTypes.exact({\n ${1:propertyName}: ${2:PropTypes.string},\n ${3:propertyName2}: ${4:PropTypes.number}\n}).isRequired",type:"PropTypeExactRequired",description:"An object with warnings on extra properties required",fileTypes:["jsx","tsx"]},{prefix:"ptany",snippet:"PropTypes.any",type:"PropTypeAny",description:"Any prop type",fileTypes:["jsx","tsx"]},{prefix:"desc",snippet:"describe('${1:first}', () => { ${2:second} })",type:"describeBlock",description:"Testing `describe` block",fileTypes:["jsx","tsx"]},{prefix:"test",snippet:"test('should ${1:first}', () => { ${2:second} })",type:"TestBlock",description:"Testing `test` block",fileTypes:["jsx","tsx"]},{prefix:"testa",snippet:"test('should ${1:first}', async () => { ${2:second} })",type:"TestAsyncBlock",description:"Testing `asynchronous test` block",fileTypes:["jsx","tsx"]},{prefix:"tit",snippet:"it('should ${1:first}', () => { ${2:second} })",type:"ItBlock",description:"Testing `it` block",fileTypes:["jsx","tsx"]},{prefix:"tita",snippet:"it('should ${1:first}', async () => { ${2:second} })",type:"ItAsyncBlock",description:"Testing asynchronous `it` block",fileTypes:["jsx","tsx"]},{prefix:"stest",snippet:`import React from 'react' 274 | import renderer from 'react-test-renderer' 275 | 276 | import { \${1:\${FILE_NAME}} } from '../\${1:\${FILE_NAME}}' 277 | 278 | describe('<\${1:\${FILE_NAME}} />', () => { 279 | const defaultProps = {} 280 | const wrapper = renderer.create(<\${1:\${FILE_NAME}} {...defaultProps} />) 281 | 282 | test('render', () => { 283 | expect(wrapper).toMatchSnapshot() 284 | }) 285 | })`,type:"SetupReactTest",fileTypes:["jsx","tsx"]},{prefix:"sntest",snippet:`import 'react-native' 286 | import React from 'react' 287 | import renderer from 'react-test-renderer' 288 | 289 | import \${1:\${FILE_NAME}} from '../\${1:\${FILE_NAME}}' 290 | 291 | describe('<\${1:\${FILE_NAME}} />', () => { 292 | const defaultProps = {} 293 | const wrapper = renderer.create(<\${1:\${FILE_NAME}} {...defaultProps} />) 294 | 295 | test('render', () => { 296 | expect(wrapper).toMatchSnapshot() 297 | }) 298 | })`,type:"SetupReactNativeTest",fileTypes:["jsx","tsx"]},{prefix:"srtest",snippet:`import React from 'react' 299 | import renderer from 'react-test-renderer' 300 | import { Provider } from 'react-redux' 301 | 302 | import store from '~/store' 303 | import { \${1:\${FILE_NAME}} } from '../\${1:\${FILE_NAME}}' 304 | 305 | describe('<\${1:\${FILE_NAME}} />', () => { 306 | const defaultProps = {} 307 | const wrapper = renderer.create( 308 | 309 | <\${1:\${FILE_NAME}} {...defaultProps} /> 310 | , 311 | ) 312 | 313 | test('render', () => { 314 | expect(wrapper).toMatchSnapshot() 315 | }) 316 | })`,type:"SetupReactComponentTestWithRedux",description:"Create test component",fileTypes:["jsx","tsx"]},{prefix:"snrtest",snippet:`import 'react-native' 317 | import React from 'react' 318 | import renderer from 'react-test-renderer' 319 | import { Provider } from 'react-redux' 320 | 321 | import store from '~/store' 322 | import \${1:\${FILE_NAME}} from '../\${1:\${FILE_NAME}}' 323 | 324 | describe('<\${1:\${FILE_NAME}} />', () => { 325 | const defaultProps = {} 326 | const wrapper = renderer.create( 327 | 328 | <\${1:\${FILE_NAME}} {...defaultProps} /> 329 | , 330 | ) 331 | 332 | test('render', () => { 333 | expect(wrapper).toMatchSnapshot() 334 | }) 335 | })`,type:"SetupReactNativeTestWithRedux",fileTypes:["jsx","tsx"]},{prefix:"redux",snippet:"import { connect } from 'react-redux'",description:"Redux: Import connect from react-redux",type:"importReduxConnect",fileTypes:["jsx","tsx"]},{prefix:"rxaction",snippet:`export const \${1} = (payload) => ({ 336 | type: \${2}, 337 | payload 338 | }) 339 | `,description:"Redux: Create a Redux action",type:"reduxAction",fileTypes:["jsx","tsx"]},{prefix:"rxconst",snippet:"export const ${1} = '${1}'",description:"Redux: Create a Redux constant",type:"reduxConst",fileTypes:["jsx","tsx"]},{prefix:"rxreducer",snippet:`const initialState = {} 340 | 341 | export default (state = initialState, { type, payload }) => { 342 | switch (type) { 343 | case \${1}: 344 | return { ...state, ...payload } 345 | default: 346 | return state 347 | } 348 | } 349 | `,description:"Redux: Create a Redux reducer",type:"reduxReducer",fileTypes:["jsx","tsx"]},{prefix:"rxselect",snippet:"import { createSelector } from 'reselect'\n\nexport const ${1} = state => state.${2}",description:"Redux: Create a Redux selector using Reselect",type:"reduxSelector",fileTypes:["jsx","tsx"]},{prefix:"rxslice",snippet:`import { createSlice } from '@reduxjs/toolkit' 350 | 351 | const initialState = {} 352 | 353 | const \${FILE_NAME} = createSlice({ 354 | name: \${2}, 355 | initialState, 356 | reducers: {} 357 | }); 358 | 359 | export const {} = \${Placeholders.FILE_NAME}.actions 360 | 361 | export default \${Placeholders.FILE_NAME}.reducer`,description:"Redux: Create a Redux slice using @reduxjs/toolkit",type:"reduxSlice",fileTypes:["jsx","tsx"]},{prefix:"reduxmap",snippet:`const mapStateToProps = (state) => ({}) 362 | 363 | const mapDispatchToProps = {}`,description:"Redux: Map state and dispatch to props",type:"mappingToProps",fileTypes:["jsx","tsx"]},{prefix:"exptp",snippet:"export type ${1:first} = {${2:second}}",type:"ExportType",fileTypes:["jsx","tsx"]},{prefix:"expint",snippet:"export interface ${1:first} {${2:second}}",type:"ExportInterface",fileTypes:["jsx","tsx"]},{prefix:"tsrcc",snippet:`import React, { Component } from 'react' 364 | 365 | interface Props { 366 | // Define your props here 367 | } 368 | 369 | interface State { 370 | // Define your state here 371 | } 372 | 373 | export default class \${1:\${FILE_NAME}} extends Component { 374 | state = {} 375 | 376 | render() { 377 | return ( 378 |
379 | \${2:/* Your JSX code here */} 380 |
381 | ) 382 | } 383 | }`,type:"TypescriptReactClassComponent",description:"Creates a React component class with ES7 module system and TypeScript interfaces",fileTypes:["jsx","tsx"]},{prefix:"tsrce",snippet:`import React, { Component } from 'react' 384 | 385 | interface Props { 386 | // Define your props here 387 | } 388 | 389 | interface State { 390 | // Define your state here 391 | } 392 | class \${1:\${FILE_NAME}} extends Component { 393 | state = {} 394 | 395 | render() { 396 | return ( 397 |
398 | \${2:/* Your JSX code here */} 399 |
400 | ) 401 | } 402 | } 403 | 404 | export default \${1:\${FILE_NAME}};`,type:"typescriptReactClassExportComponent",description:"Creates a React component class with ES7 module system and TypeScript interfaces",fileTypes:["jsx","tsx"]},{prefix:"tsrfce",snippet:`import React from 'react' 405 | 406 | interface Props { 407 | // Define your props here 408 | } 409 | 410 | function \${1:\${FILE_NAME}}({}: Props) { 411 | return ( 412 |
413 | \${2:/* Your JSX code here */} 414 |
415 | ) 416 | } 417 | 418 | export default \${1:\${FILE_NAME}};`,type:"typescriptReactFunctionalExportComponent",description:"Creates a React Functional Component with ES7 module system and TypeScript interface",fileTypes:["jsx","tsx"]},{prefix:"tsrfc",snippet:`import React from 'react' 419 | 420 | interface Props { 421 | // Define your props here 422 | } 423 | 424 | export default function \${1:\${FILE_NAME}}({}: Props) { 425 | return ( 426 |
427 | \${2:/* Your JSX code here */} 428 |
429 | ) 430 | }`,type:"typescriptReactFunctionalComponent",description:"Creates a React Functional Component with ES7 module system and TypeScript interface",fileTypes:["jsx","tsx"]},{prefix:"tsrafce",snippet:`import React from 'react'; 431 | 432 | interface Props { 433 | // Define your props here 434 | } 435 | 436 | const \${1:\${FILE_NAME}} = (props: Props) => { 437 | return ( 438 |
439 | \${2:first} {/* Your JSX code here */} 440 |
441 | ); 442 | }; 443 | 444 | export default \${1:\${FILE_NAME}};`,type:"typescriptReactArrowFunctionExportComponent",description:"Creates a React Arrow Function Component with ES7 module system and TypeScript interface",fileTypes:["jsx","tsx"]},{prefix:"tsrafc",snippet:`import React from 'react'; 445 | 446 | interface Props { 447 | // Define your props here 448 | } 449 | 450 | const \${1:\${FILE_NAME}} = (props: Props) => { 451 | return ( 452 |
453 | \${2:FirstTab} {/* Your JSX code here */} 454 |
455 | ); 456 | };`,type:"typescriptReactArrowFunctionComponent",description:"Creates a React Arrow Function Component with ES7 module system and TypeScript interface",fileTypes:["jsx","tsx"]},{prefix:"tsrpc",snippet:`import React, { PureComponent } from 'react'; 457 | 458 | interface Props { 459 | // Define your props here 460 | } 461 | 462 | export default class \${1:\${FILE_NAME}} extends PureComponent { 463 | \${2:innerComponentReturn} 464 | }`,type:"typescriptReactClassPureComponent",description:"Creates a React pure component class with ES7 module system and TypeScript interface",fileTypes:["jsx","tsx"]},{prefix:"tsrpce",snippet:`import React, { PureComponent } from 'react'; 465 | 466 | interface Props { 467 | // Define your props here 468 | } 469 | 470 | class \${1:\${FILE_NAME}} extends PureComponent { 471 | \${2:innerComponentReturn} 472 | } 473 | export default \${1:\${FILE_NAME}};`,type:"typescriptReactClassExportPureComponent",description:"Creates a React pure component class with ES7 module system and TypeScript interface",fileTypes:["jsx","tsx"]},{prefix:"tsrcredux",snippet:`import { connect } from 'react-redux'; 474 | \${1:reactComponent} 475 | 476 | interface Props { 477 | // Define your props here 478 | } 479 | 480 | interface State { 481 | // Define your state here 482 | } 483 | 484 | export class \${2:\${FILE_NAME}} extends Component { 485 | state = {}; 486 | \${3:innerComponentReturn} 487 | } 488 | \${4:reduxComponentExport}`,type:"typescriptReactClassComponentRedux",description:"Creates a React component class with connected redux and ES7 module system and TypeScript interfaces",fileTypes:["jsx","tsx"]},{prefix:"tsrnf",snippet:`import { View, Text } from 'react-native'; 489 | \${1:react} 490 | 491 | interface Props { 492 | // Define your props here 493 | } 494 | 495 | const \${2:\${FILE_NAME}} = (props: Props) => { 496 | return ( 497 | 498 | \${3:FirstTab} 499 | 500 | ); 501 | }; 502 | 503 | export default \${2:\${FILE_NAME}};`,type:"typescriptReactNativeArrowFunctionComponent",description:"Creates a React Native Arrow Function Component with ES7 module system in TypeScript",fileTypes:["jsx","tsx"]},{prefix:"tsrnfs",snippet:`import { StyleSheet, Text, View } from 'react-native'; 504 | \${1:react} 505 | 506 | interface Props { 507 | // Define your props here 508 | } 509 | 510 | const \${2:\${FILE_NAME}} = (props: Props) => { 511 | return ( 512 | 513 | \${3:FirstTab} 514 | 515 | ); 516 | }; 517 | 518 | export default \${2:\${FILE_NAME}}; 519 | 520 | const styles = StyleSheet.create({});`,type:"typescriptReactNativeArrowFunctionComponentWithStyles",description:"Creates a React Native Arrow Function Component with ES7 module system, TypeScript interface and StyleSheet",fileTypes:["jsx","tsx"]},{prefix:"fil",snippet:"${1:array}.filter((${2:element}) => ${3:condition})",type:"Array.filter",description:"Creates a new array with elements that pass a test.",fileTypes:["jsx","tsx","javascript"]},{prefix:"fi",snippet:"${1:array}.find((${2:element}) => ${3:condition})",type:"Array.find",description:"Returns the first element that passes a test.",fileTypes:["jsx","tsx","javascript"]},{prefix:"join",snippet:"${1:array}.join(${2:separator})",type:"Array.join",description:"Joins all elements of an array into a string.",fileTypes:["jsx","tsx","javascript"]},{prefix:"map",snippet:"${1:array}.map((${2:element}, ${3:index}) => ${4:newElements})",type:"Array.map",description:"Creates a new array with the results of calling a function for each element.",fileTypes:["jsx","tsx","javascript"]},{prefix:"pop",snippet:"${1:array}.pop(${2:element})",type:"Array.pop",description:"Removes the last element from an array and returns it.",fileTypes:["jsx","tsx","javascript"]},{prefix:"push",snippet:"${1:array}.push(${2:element})",type:"Array.push",description:"Adds one or more elements to the end of an array.",fileTypes:["jsx","tsx","javascript"]},{prefix:"red",snippet:"${1:array}.reduce((${2:accumulator}, ${3:currentValue}) => ${4:accumulatorFunction}, ${5:initialValue})",type:"Array.reduce",description:"Combines all elements of an array into a single value.",fileTypes:["jsx","tsx","javascript"]},{prefix:"rev",snippet:"${1:array}.reverse()",type:"Array.reverse",description:"Reverses the order of the elements in an array.",fileTypes:["jsx","tsx","javascript"]},{prefix:"sh",snippet:"${1:array}.shift(${2:element})",type:"Array.shift",description:"Removes the first element from an array and returns it.",fileTypes:["jsx","tsx","javascript"]},{prefix:"unsh",snippet:"${1:array}.unshift(${2:element})",type:"Array.unshift",description:"Adds the specified element to the beginning of an array.",fileTypes:["jsx","tsx","javascript"]},{prefix:"spl",snippet:"${1:array}.splice(${2:start}, ${3:deleteCount}, ${4:elements})",type:"Array.splice",description:"Removes, replaces and/or adds new elements in an array.",fileTypes:["jsx","tsx","javascript"]},{prefix:"some",snippet:"${1:array}.some((${2:el}) => ${3:condition})",type:"Array.some",description:"Checks if at least one element in the array passes a test.",fileTypes:["jsx","tsx","javascript"]},{prefix:"sort",snippet:"${1:array}.sort((${2:a}, ${3:b}) => ${4:comparisonFunction})",type:"Array.sort",description:"Sorts the elements of an array in a particular order.",fileTypes:["jsx","tsx","javascript"]},{prefix:"tostr",snippet:"${1:array}.toString()",type:"Array.toString",description:"Returns a string representation of the array.",fileTypes:["jsx","tsx","javascript"]},{prefix:"frm",snippet:"Array.from(${1:arrayLike})",type:"Array.from",description:"Creates a new array from an iterable object.",fileTypes:["jsx","tsx","javascript"]},{prefix:"ca",snippet:"${1:str}.charAt(${2:index})",type:"String.charAt",description:"Returns the character at a specific index.",fileTypes:["jsx","tsx","javascript"]},{prefix:"match",snippet:"${1:str}.match(${2:regex})",type:"String.match",description:"Searches a string for a match against a regular expression.",fileTypes:["jsx","tsx","javascript"]},{prefix:"rpt",snippet:"${1:str}.repeat(${2:count})",type:"String.repeat",description:"Repeats a string a specified number of times.",fileTypes:["jsx","tsx","javascript"]},{prefix:"rep",snippet:"${1:str}.replace(${2:substring}, ${3:replacement})",type:"String.replace",description:"Searches a string for a match against a regular expression and replaces it with another string.",fileTypes:["jsx","tsx","javascript"]},{prefix:"repa",snippet:"${1:str}.replaceAll(${2:substring}, ${3:replacement})",type:"String.replaceAll",description:"Searches a string for a all matches against a regular expression or a substring and replaces them with another string.",fileTypes:["jsx","tsx","javascript"]},{prefix:"sw",snippet:"${1:str}.startsWith(${2:substr})",type:"String.startsWith",description:"Checks if a string starts with a specified substring.",fileTypes:["jsx","tsx","javascript"]},{prefix:"ew",snippet:"${1:str}.endsWith(${2:substr})",type:"String.endsWith",description:"Checks if a string ends with a specified substring.",fileTypes:["jsx","tsx","javascript"]},{prefix:"sstr",snippet:"${1:str}.substring(${2:start}, ${3:end})",type:"String.substring",description:"Extracts a substring from a string.",fileTypes:["jsx","tsx","javascript"]},{prefix:"ss",snippet:"${1:str}.substr(${2:start}, ${3:length})",type:"String.substr",description:"Extracts a substring with a specific length from a string.",fileTypes:["jsx","tsx","javascript"]},{prefix:"tlc",snippet:"${1:str}.toLowerCase()",type:"String.toLowerCase",description:"Returns a new string with all characters converted to lowercase.",fileTypes:["jsx","tsx","javascript"]},{prefix:"tuc",snippet:"${1:str}.toUpperCase()",type:"String.toUpperCase",description:"Returns a new string with all characters converted to uppercase.",fileTypes:["jsx","tsx","javascript"]},{prefix:"trm",snippet:"${1:str}.trim()",type:"String.trim",description:"Removes leading and trailing whitespace from a string.",fileTypes:["jsx","tsx","javascript"]},{prefix:"sp",snippet:"${1:str}.split(${2:delimiter})",type:"String.split",description:"Splits a string into an array of substrings using all occurrences of the delimiter.",fileTypes:["jsx","tsx","javascript"]},{prefix:"inc",snippet:"${1:elements}.includes(${2:element}, ${3:start})",type:"includes",description:"Checks if an array or string includes a specific element",fileTypes:["jsx","tsx","javascript"]},{prefix:"sl",snippet:"${1:elements}.slice(${2:start}, ${3:end})",type:"slice",description:"Returns a shallow copy of selected elements in an array or string, as a new array or string.",fileTypes:["jsx","tsx","javascript"]},{prefix:"io",snippet:"${1:elements}.indexOf(${2:element})",type:"indexOf",description:"Returns the first index of a specific element.",fileTypes:["jsx","tsx","javascript"]},{prefix:"cc",snippet:"${1:elements}.concat(${2:otherElements})",type:"concat",description:"Combines multiple strings or arrays into a single new string or array.",fileTypes:["jsx","tsx","javascript"]},{prefix:"lio",snippet:"${1:str}.lastIndexOf(${2:substr})",type:"lastIndexOf",description:"Returns the last index of a specified value within another array or string.",fileTypes:["jsx","tsx","javascript"]},{prefix:"ael",snippet:"${1:document}.addEventListener('${2:click}', ${3:(e) => {}})",type:"addEventListener",description:"Adds an event listener to a DOM element",fileTypes:["tsx","javascript"]},{prefix:"rel",snippet:"${1:document}.removeEventListener('${2:click}', ${3:eventListener})",type:"removeEventListener",description:"Removes an event listener from a DOM element",fileTypes:["tsx","javascript"]},{prefix:"ac",snippet:"${1:document}.appendChild(${2:elem})",type:"appendChild",description:"Adds a child node to a specified parent",fileTypes:["tsx","javascript"]},{prefix:"rc",snippet:"${1:document}.removeChild(${2:elem})",type:"removeChild",description:"Removes a child node from the DOM",fileTypes:["tsx","javascript"]},{prefix:"rpc",snippet:"${1:document}.replaceChild(${2:newChild}, ${3:oldChild})",type:"replaceChild",description:"Replaces a child node from the DOM",fileTypes:["tsx","javascript"]},{prefix:"inb",snippet:"${1:parentEl}.insertBefore(${2:newEl}, ${3:refEl})",type:"insertBefore",description:"Inserts a child node into the DOM",fileTypes:["tsx","javascript"]},{prefix:"ina",snippet:"${1:parentEl}.insertAdjacentHTML(${2:position}, ${3:el})",type:"insertAdjacentHTML",description:"Inserts a child node into the DOM",fileTypes:["tsx","javascript"]},{prefix:"ds",snippet:"${1:el}.dataset",type:"dataset",description:"Returns the value of all 'data-' properties on a HTML element",fileTypes:["tsx","javascript"]},{prefix:"gcs",snippet:"getComputedStyle(${1:el})",type:"replaceChild",description:"Removes a child node from the DOM",fileTypes:["tsx","javascript"]},{prefix:"cel",snippet:"${1:document}.createElement(${2:element})",type:"createElement",description:"Creates a new HTML element with a specified tag name",fileTypes:["tsx","javascript"]},{prefix:"cdf",snippet:"document.createDocumentFragment()",type:"createDocumentFragment",description:"Creates a new offscreen node",fileTypes:["tsx","javascript"]},{prefix:"cla",snippet:"${1:document}.classList.add('${2:class}')",type:"classList.add",description:"Adds a new CSS class to a HTML element",fileTypes:["tsx","javascript"]},{prefix:"clr",snippet:"${1:document}.classList.remove('${2:class}')",type:"classList.remove",description:"Removes an existing CSS class from a HTML element",fileTypes:["tsx","javascript"]},{prefix:"clt",snippet:"${1:document}.classList.toggle('${2:class}')",type:"classList.toggle",description:"Adds or removes a class based on wether it's already present",fileTypes:["tsx","javascript"]},{prefix:"gei",snippet:"${1:document}.getElementById('${2:id}')",type:"getElementById",description:"Returns an element whose id property matches the specified string",fileTypes:["tsx","javascript"]},{prefix:"gecn",snippet:"${1:document}.getElementsByClassName('${2:class}')",type:"getElementsByClassName",description:"Returns a HTML collection of elements with the given class name",fileTypes:["tsx","javascript"]},{prefix:"getn",snippet:"${1:document}.getElementsByTagName('${2:tag}')",type:"getElementsByTagName",description:"Returns a HTML collection of elements with the given tag name",fileTypes:["tsx","javascript"]},{prefix:"ga",snippet:"${1:document}.getAttribute('${2:attr}')",type:"getAttribute",description:"Returns the value of the specified attribute on the element",fileTypes:["tsx","javascript"]},{prefix:"sa",snippet:"${1:document}.setAttribute('${2:attr}')",type:"setAttribute",description:"Adds the attribute with the specified name on the element",fileTypes:["tsx","javascript"]},{prefix:"ra",snippet:"${1:document}.removeAttribute('${2:attr}')",type:"removeAttribute",description:"Removes the attribute with the specified name on the element",fileTypes:["tsx","javascript"]},{prefix:"ih",snippet:"${1:document}.innerHTML = '${2:elem}'",type:"innerHTML",description:"Gets or sets the HTML markup contained within an element",fileTypes:["tsx","javascript"]},{prefix:"tc",snippet:"${1:document}.textContent = '${2:content}'",type:"textContent",description:"Gets or sets the text content of the specified element",fileTypes:["tsx","javascript"]},{prefix:"qs",snippet:"${1:document}.querySelector('${2:selector}')",type:"querySelector",description:"Returns the first element within the DOM that matches the specified selector(s)",fileTypes:["tsx","javascript"]},{prefix:"qsa",snippet:"${1:document}.querySelectorAll('${2:selector}')",type:"querySelectorAll",description:"Returns a NodeList of all elements within the DOM that matches the specified selector(s)",fileTypes:["tsx","javascript"]}];var{snippetManager:_}=ace.require("ace/snippets"),D=acode.require("selectionMenu"),a=acode.require("settings"),{editor:o}=editorManager,c=class{constructor(){this.setVariables(),this.initializeAutocompletion(g||[]),a.value[i.id]||(a.value[i.id]={snippetDocs:!1},a.update(!1))}setVariables(){let{variables:t}=_;t.FILE_NAME=()=>{let s=editorManager.activeFile.filename,r=s.lastIndexOf(".");return s.slice(0,r)}}initializeAutocompletion(t){this.reactCompleter={getCompletions:(s,r,p,f,l)=>{let v=h(r),d=t.filter(n=>n.fileTypes.includes(v));d.length>0?l(null,d.map(n=>{let x={caption:n.prefix,snippet:n.snippet,meta:n.type,value:n.snippet,type:"snippet",docHTML:n.description||""};return typeof extraSyntaxHighlightsInstalled<"u"&&extraSyntaxHighlightsInstalled?{...x,icon:"icon react-snippet-icon"}:x})):l(null,[])}},o.completers.unshift(this.reactCompleter)}async init(t,s,r){if(this.settings.snippetDocs){let p=document.createElement("style");p.id="overideCompletionDocs",p.innerHTML=` 521 | .ace_tooltip.ace_doc-tooltip { 522 | display: flex !important; 523 | background-color: var(--secondary-color); 524 | color: var(--secondary-text-color); 525 | max-width: 68%; 526 | white-space: pre-wrap; 527 | } 528 | `,document.head.append(p)}acode.addIcon("react-snippet-icon",this.baseUrl+"icon.png"),D.add(this.convertToJsx.bind(this),"JSX","selected")}convertToJsx(){let t=o.getSelectionRange(),s=o.getSelectedText(),r=j(s);o.getSession().replace(t,r),window.toast("Converted \u{1F4A5}",3e3)}get settingsObj(){return{list:[{key:"snippetDocs",text:"Enable snippet docs",checkbox:!!this.settings.snippetDocs,info:"To show brief docs about the snippets"}],cb:(t,s)=>{if(this.settings[t]=s,a.update(),s==!0){let r=document.createElement("style");r.id="overideCompletionDocs",r.innerHTML=` 529 | .ace_tooltip.ace_doc-tooltip { 530 | display: flex !important; 531 | background-color: var(--secondary-color); 532 | color: var(--secondary-text-color); 533 | max-width: 68%; 534 | white-space: pre-wrap; 535 | } 536 | `,document.head.append(r)}else s==!1&&document.querySelector("overideCompletionDocs").remove()}}}get settings(){return a.value[i.id]}async destroy(){o.completers.splice(o.completers.indexOf(this.reactCompleter),1),document.querySelector("overideCompletionDocs").remove()}};if(window.acode){let e=new c;acode.setPluginInit(i.id,async(t,s,{cacheFileUrl:r,cacheFile:p})=>{t.endsWith("/")||(t+="/"),e.baseUrl=t,await e.init(s,p,r)},e.settingsObj),acode.setPluginUnmount(i.id,()=>{e.destroy()})} 537 | -------------------------------------------------------------------------------- /docs/Snippets.md: -------------------------------------------------------------------------------- 1 | # Snippets 2 | 3 | This documentation is built upon the [vscode-react-javascript-snippets 4 | ](https://github.com/ults-io/vscode-react-javascript-snippets/blob/master/docs/Snippets.md) documentation. 5 | 6 | ## Snippets info 7 | 8 | Every space inside `{ }` and `( )` means that this is pushed into next line :) 9 | `$` represent each step after `tab`. 10 | 11 | _TypeScript_ has own components and own snippets. Use search or just type `ts` before every component snippet. 12 | 13 | I.E. `tsrcc` 14 | 15 |
16 | 17 | ### React Hooks 18 | 19 | - Hooks from [official docs](https://reactjs.org/docs/hooks-reference.html) are added with hook name as prefix. 20 | 21 | ### Basic Methods 22 | 23 | | Prefix | Method | 24 | | -------: | --------------------------------------------------- | 25 | | `imp→` | `import moduleName from 'module'` | 26 | | `imn→` | `import 'module'` | 27 | | `imd→` | `import { destructuredModule } from 'module'` | 28 | | `ime→` | `import * as alias from 'module'` | 29 | | `ima→` | `import { originalName as aliasName} from 'module'` | 30 | | `exp→` | `export default moduleName` | 31 | | `exd→` | `export { destructuredModule } from 'module'` | 32 | | `exa→` | `export { originalName as aliasName} from 'module'` | 33 | | `enf→` | `export const functionName = (params) => { }` | 34 | | `edf→` | `export default (params) => { }` | 35 | | `ednf→` | `export default function functionName(params) { }` | 36 | | `met→` | `methodName = (params) => { }` | 37 | | `fre→` | `arrayName.forEach(element => { }` | 38 | | `fof→` | `for(let itemName of objectName { }` | 39 | | `fin→` | `for(let itemName in objectName { }` | 40 | | `anfn→` | `(params) => { }` | 41 | | `nfn→` | `const functionName = (params) => { }` | 42 | | `dob→` | `const {propName} = objectToDescruct` | 43 | | `dar→` | `const [propName] = arrayToDescruct` | 44 | | `sti→` | `setInterval(() => { }, intervalTime` | 45 | | `sto→` | `setTimeout(() => { }, delayTime` | 46 | | `prom→` | `return new Promise((resolve, reject) => { }` | 47 | | `cmmb→` | `comment block` | 48 | | `cp→` | `const { } = this.props` | 49 | | `cs→` | `const { } = this.state` | 50 | | `req→` | `const ${1:packageName} = require('${1:package}')` | 51 | | `call→` | `${1:method}.call(${2:context}, ${3:arguments})` | 52 | | `apply→` | `${1:method}.apply(${2:context}, ${3:arguments})` | 53 | | `jp→` | `JSON.parse(${1:obj})` | 54 | | `js→` | `JSON.stringify(${1:obj})` | 55 | | `us→` | `'use strict'` | 56 | | `al→` | `alert('${1:message}')` | 57 | | `pr→` | `prompt('${1:message}')` | 58 | | `cf→` | `confirm('${1:message}')` | 59 | 60 | ### React 61 | 62 | | Prefix | Method | 63 | | ----------: | --------------------------------------------------------------------------- | 64 | | `imr→` | `import React from 'react'` | 65 | | `imrd→` | `import ReactDOM from 'react-dom'` | 66 | | `imrc→` | `import React, { Component } from 'react'` | 67 | | `imrpc→` | `import React, { PureComponent } from 'react'` | 68 | | `imrm→` | `import React, { memo } from 'react'` | 69 | | `imrr→` | `import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'` | 70 | | `imbr→` | `import { BrowserRouter as Router} from 'react-router-dom'` | 71 | | `imbrc→` | `import { Route, Switch, NavLink, Link } from react-router-dom'` | 72 | | `imbrr→` | `import { Route } from 'react-router-dom'` | 73 | | `imbrs→` | `import { Switch } from 'react-router-dom'` | 74 | | `imbrl→` | `import { Link } from 'react-router-dom'` | 75 | | `imbrnl→` | `import { NavLink } from 'react-router-dom'` | 76 | | `imrs→` | `import React, { useState } from 'react'` | 77 | | `imrse→` | `import React, { useState, useEffect } from 'react'` | 78 | | `redux→` | `import { connect } from 'react-redux'` | 79 | | `est→` | `this.state = { }` | 80 | | `cdm→` | `componentDidMount = () => { }` | 81 | | `scu→` | `shouldComponentUpdate = (nextProps, nextState) => { }` | 82 | | `cdup→` | `componentDidUpdate = (prevProps, prevState) => { }` | 83 | | `cwun→` | `componentWillUnmount = () => { }` | 84 | | `gdsfp→` | `static getDerivedStateFromProps(nextProps, prevState) { }` | 85 | | `gsbu→` | `getSnapshotBeforeUpdate = (prevProps, prevState) => { }` | 86 | | `sst→` | `this.setState({ })` | 87 | | `ssf→` | `this.setState((state, props) => return { })` | 88 | | `props→` | `this.props.propName` | 89 | | `state→` | `this.state.stateName` | 90 | | `rcontext→` | `const $1 = React.createContext()` | 91 | | `cref→` | `this.$1Ref = React.createRef()` | 92 | | `fref→` | `const ref = React.createRef()` | 93 | | `bnd→` | `this.methodName = this.methodName.bind(this)` | 94 | 95 | ### React Native 96 | 97 | | Prefix | Method | 98 | | ---------: | -------------------------------------- | 99 | | `imrn→` | `import { $1 } from 'react-native'` | 100 | | `rnstyle→` | `const styles = StyleSheet.create({})` | 101 | 102 | ### Redux 103 | 104 | | Prefix | Method | 105 | | -----------: | ------------------------- | 106 | | `rxaction→` | `redux action template` | 107 | | `rxconst→` | `export const $1 = '$1'` | 108 | | `rxreducer→` | `redux reducer template` | 109 | | `rxselect→` | `redux selector template` | 110 | | `rxslice→` | `redux slice template` | 111 | 112 | ### PropTypes 113 | 114 | | Prefix | Method | 115 | | --------: | ---------------------------------------- | 116 | | `pta→` | `PropTypes.array` | 117 | | `ptar→` | `PropTypes.array.isRequired` | 118 | | `ptb→` | `PropTypes.bool` | 119 | | `ptbr→` | `PropTypes.bool.isRequired` | 120 | | `ptf→` | `PropTypes.func` | 121 | | `ptfr→` | `PropTypes.func.isRequired` | 122 | | `ptn→` | `PropTypes.number` | 123 | | `ptnr→` | `PropTypes.number.isRequired` | 124 | | `pto→` | `PropTypes.object` | 125 | | `ptor→` | `PropTypes.object.isRequired` | 126 | | `pts→` | `PropTypes.string` | 127 | | `ptsr→` | `PropTypes.string.isRequired` | 128 | | `ptnd→` | `PropTypes.node` | 129 | | `ptndr→` | `PropTypes.node.isRequired` | 130 | | `ptel→` | `PropTypes.element` | 131 | | `ptelr→` | `PropTypes.element.isRequired` | 132 | | `pti→` | `PropTypes.instanceOf(name)` | 133 | | `ptir→` | `PropTypes.instanceOf(name).isRequired` | 134 | | `pte→` | `PropTypes.oneOf([name])` | 135 | | `pter→` | `PropTypes.oneOf([name]).isRequired` | 136 | | `ptet→` | `PropTypes.oneOfType([name])` | 137 | | `ptetr→` | `PropTypes.oneOfType([name]).isRequired` | 138 | | `ptao→` | `PropTypes.arrayOf(name)` | 139 | | `ptaor→` | `PropTypes.arrayOf(name).isRequired` | 140 | | `ptoo→` | `PropTypes.objectOf(name)` | 141 | | `ptoor→` | `PropTypes.objectOf(name).isRequired` | 142 | | `ptsh→` | `PropTypes.shape({ })` | 143 | | `ptshr→` | `PropTypes.shape({ }).isRequired` | 144 | | `ptany→` | `PropTypes.any` | 145 | | `ptypes→` | `static propTypes = {}` | 146 | 147 | ### Console 148 | 149 | | Prefix | Method | 150 | | ------ | ------------------------------------------------------------ | 151 | | `clg→` | `console.log(object)` | 152 | | `clo→` | `` console.log(`object`, object) `` | 153 | | `clj→` | `` console.log(`object`, JSON.stringify(object, null, 2)) `` | 154 | | `ctm→` | `` console.time(`timeId`) `` | 155 | | `cte→` | `` console.timeEnd(`timeId`) `` | 156 | | `cas→` | `console.assert(expression,object)` | 157 | | `ccl→` | `console.clear()` | 158 | | `cco→` | `console.count(label)` | 159 | | `cdi→` | `console.dir` | 160 | | `cer→` | `console.error(object)` | 161 | | `cgr→` | `console.group(label)` | 162 | | `cge→` | `console.groupEnd()` | 163 | | `ctr→` | `console.trace(object)` | 164 | | `cwa→` | `console.warn` | 165 | | `cin→` | `console.info` | 166 | 167 | ### Array and String methods snippets 168 | 169 | | Prefix | Method | 170 | | -------- | --------------------------------------------------------------------------------------------------------- | 171 | | `fil→` | `${1:array}.filter((${2:element}) => ${3:condition})` | 172 | | `fi→` | `${1:array}.find((${2:element}) => ${3:condition})` | 173 | | `jn→` | `${1:array}.join(${2:separator})` | 174 | | `mp→` | `${1:array}.map((${2:element}, ${3:index}) => ${4:newElements})` | 175 | | `pop→` | `${1:array}.pop(${2:element})` | 176 | | `psh→` | `${1:array}.push(${2:element})` | 177 | | `red→` | `${1:array}.reduce((${2:accumulator}, ${3:currentValue}) => ${4:accumulatorFunction}, ${5:initialValue})` | 178 | | `rev→` | `${1:array}.reverse()` | 179 | | `sh→` | `${1:array}.shift(${2:element})` | 180 | | `unsh→` | `${1:array}.unshift(${2:element})` | 181 | | `spl→` | `${1:array}.splice(${2:start}, ${3:deleteCount}, ${4:elements})` | 182 | | `some→` | `${1:array}.some((${2:el}) => ${3:condition})` | 183 | | `srt→` | `${1:array}.sort((${2:a}, ${3:b}) => ${4:comparisonFunction})` | 184 | | `tostr→` | `${1:array}.toString()` | 185 | | `afrm→` | `Array.from(${1:arrayLike})` | 186 | | `ca→` | `${1:str}.charAt(${2:index})` | 187 | | `ms→` | `${1:str}.match(${2:regex})` | 188 | | `rpt→` | `${1:str}.repeat(${2:count})` | 189 | | `rep→` | `${1:str}.replace(${2:substring}, ${3:replacement})` | 190 | | `repa→` | `${1:str}.replaceAll(${2:substring}, ${3:replacement})` | 191 | | `sw→` | `${1:str}.startsWith(${2:substr})` | 192 | | `ew→` | `${1:str}.endsWith(${2:substr})` | 193 | | `sstr→` | `${1:str}.substring(${2:start}, ${3:end})` | 194 | | `ss→` | `${1:str}.substr(${2:start}, ${3:length})` | 195 | | `tlc→` | `${1:str}.toLowerCase()` | 196 | | `tuc→` | `${1:str}.toUpperCase()` | 197 | | `trm→` | `${1:str}.trim()` | 198 | | `sp→` | `${1:str}.split(${2:delimiter})` | 199 | | `inc→` | `${1:elements}.includes(${2:element}, ${3:start})` | 200 | | `sl→` | `${1:elements}.slice(${2:start}, ${3:end})` | 201 | | `io→` | `${1:elements}.indexOf(${2:element})` | 202 | | `cc→` | `${1:elements}.concat(${2:otherElements})` | 203 | | `lio→` | `${1:str}.lastIndexOf(${2:substr})` | 204 | 205 | ### DOM Snippets 206 | 207 | | Prefix | Method | 208 | | ------- | --------------------------------------------------------------------- | 209 | | `ael→` | `${1:document}.addEventListener('${2:click}', ${3:(e) => {}})` | 210 | | `rel→` | `${1:document}.removeEventListener('${2:click}', ${3:eventListener})` | 211 | | `ac→` | `${1:document}.appendChild(${2:elem})` | 212 | | `rc→` | `${1:document}.removeChild(${2:elem})` | 213 | | `rpc→` | `${1:document}.replaceChild(${2:newChild}, ${3:oldChild})` | 214 | | `inb→` | `${1:parentEl}.insertBefore(${2:newEl}, ${3:refEl})` | 215 | | `ina→` | `${1:parentEl}.insertAdjacentHTML(${2:position}, ${3:el})` | 216 | | `ds→` | `${1:el}.dataset` | 217 | | `gcs→` | `getComputedStyle(${1:el})` | 218 | | `cel→` | `${1:document}.createElement(${2:element})` | 219 | | `cdf→` | `document.createDocumentFragment()` | 220 | | `cla→` | `${1:document}.classList.add('${2:class}')` | 221 | | `clr→` | `${1:document}.classList.remove('${2:class}')` | 222 | | `cla→` | `${1:document}.classList.add('${2:class}')` | 223 | | `clt→` | `${1:document}.classList.toggle('${2:class}')` | 224 | | `gei→` | `${1:document}.getElementById('${2:id}')` | 225 | | `gecn→` | `${1:document}.getElementsByClassName('${2:class}')` | 226 | | `getn→` | `${1:document}.getElementsByTagName('${2:tag}')` | 227 | | `gei→` | `${1:document}.getElementById('${2:id}')` | 228 | | `ga→` | `${1:document}.getAttribute('${2:attr}')` | 229 | | `sa→` | `${1:document}.setAttribute('${2:attr}')` | 230 | | `ra→` | `${1:document}.removeAttribute('${2:attr}')` | 231 | | `ih→` | `${1:document}.innerHTML = '${2:elem}'` | 232 | | `tc→` | `${1:document}.textContent = '${2:content}'` | 233 | | `qs→` | `${1:document}.querySelector('${2:selector}')` | 234 | | `qsa→` | `${1:document}.querySelectorAll('${2:selector}')` | 235 | 236 | ### React Components 237 | 238 | ### `rcc` 239 | 240 | ```javascript 241 | import React, { Component } from "react"; 242 | 243 | export default class FileName extends Component { 244 | render() { 245 | return
$2
; 246 | } 247 | } 248 | ``` 249 | 250 | ### `rce` 251 | 252 | ```javascript 253 | import React, { Component } from "react"; 254 | 255 | export class FileName extends Component { 256 | render() { 257 | return
$2
; 258 | } 259 | } 260 | 261 | export default $1; 262 | ``` 263 | 264 | ### `rcep` 265 | 266 | ```javascript 267 | import React, { Component } from "react"; 268 | import PropTypes from "prop-types"; 269 | 270 | export class FileName extends Component { 271 | static propTypes = {}; 272 | 273 | render() { 274 | return
$2
; 275 | } 276 | } 277 | 278 | export default $1; 279 | ``` 280 | 281 | ### `rpc` 282 | 283 | ```javascript 284 | import React, { PureComponent } from "react"; 285 | 286 | export default class FileName extends PureComponent { 287 | render() { 288 | return
$2
; 289 | } 290 | } 291 | ``` 292 | 293 | ### `rpcp` 294 | 295 | ```javascript 296 | import React, { PureComponent } from "react"; 297 | import PropTypes from "prop-types"; 298 | 299 | export default class FileName extends PureComponent { 300 | static propTypes = {}; 301 | 302 | render() { 303 | return
$2
; 304 | } 305 | } 306 | ``` 307 | 308 | ### `rpce` 309 | 310 | ```javascript 311 | import React, { PureComponent } from "react"; 312 | import PropTypes from "prop-types"; 313 | 314 | export class FileName extends PureComponent { 315 | static propTypes = {}; 316 | 317 | render() { 318 | return
$2
; 319 | } 320 | } 321 | 322 | export default FileName; 323 | ``` 324 | 325 | ### `rccp` 326 | 327 | ```javascript 328 | import React, { Component } from "react"; 329 | import PropTypes from "prop-types"; 330 | 331 | export default class FileName extends Component { 332 | static propTypes = { 333 | $2: $3, 334 | }; 335 | 336 | render() { 337 | return
$4
; 338 | } 339 | } 340 | ``` 341 | 342 | ### `rfcp` 343 | 344 | ```javascript 345 | import React from "react"; 346 | import PropTypes from "prop-types"; 347 | 348 | function $1(props) { 349 | return
$0
; 350 | } 351 | 352 | $1.propTypes = {}; 353 | 354 | export default $1; 355 | ``` 356 | 357 | ### `rfc` 358 | 359 | ```javascript 360 | import React from "react"; 361 | 362 | export default function $1() { 363 | return
$0
; 364 | } 365 | ``` 366 | 367 | ### `rfce` 368 | 369 | ```javascript 370 | import React from "react"; 371 | 372 | function $1() { 373 | return
$0
; 374 | } 375 | 376 | export default $1; 377 | ``` 378 | 379 | ### `rafcp` 380 | 381 | ```javascript 382 | import React from "react"; 383 | import PropTypes from "prop-types"; 384 | 385 | const $1 = (props) => { 386 | return
$0
; 387 | }; 388 | 389 | $1.propTypes = {}; 390 | 391 | export default $1; 392 | ``` 393 | 394 | ### `rafc` 395 | 396 | ```javascript 397 | import React from "react"; 398 | 399 | export const $1 = () => { 400 | return
$0
; 401 | }; 402 | ``` 403 | 404 | ### `rafce` 405 | 406 | ```javascript 407 | import React from "react"; 408 | 409 | const $1 = () => { 410 | return
$0
; 411 | }; 412 | 413 | export default $1; 414 | ``` 415 | 416 | ### `rmc` 417 | 418 | ```javascript 419 | import React, { memo } from "react"; 420 | 421 | export default memo(function $1() { 422 | return
$0
; 423 | }); 424 | ``` 425 | 426 | ### `rmcp` 427 | 428 | ```javascript 429 | import React, { memo } from "react"; 430 | import PropTypes from "prop-types"; 431 | 432 | const $1 = memo(function $1(props) { 433 | return
$0
; 434 | }); 435 | 436 | $1.propTypes = {}; 437 | 438 | export default $1; 439 | ``` 440 | 441 | ### `rcredux` 442 | 443 | ```javascript 444 | import React, { Component } from "react"; 445 | import { connect } from "react-redux"; 446 | 447 | export class FileName extends Component { 448 | render() { 449 | return
$4
; 450 | } 451 | } 452 | 453 | const mapStateToProps = (state) => ({}); 454 | 455 | const mapDispatchToProps = {}; 456 | 457 | export default connect(mapStateToProps, mapDispatchToProps)(FileName); 458 | ``` 459 | 460 | ### `rcreduxp` 461 | 462 | ```javascript 463 | import React, { Component } from "react"; 464 | import PropTypes from "prop-types"; 465 | import { connect } from "react-redux"; 466 | 467 | export class FileName extends Component { 468 | static propTypes = { 469 | $2: $3, 470 | }; 471 | 472 | render() { 473 | return
$4
; 474 | } 475 | } 476 | 477 | const mapStateToProps = (state) => ({}); 478 | 479 | const mapDispatchToProps = {}; 480 | 481 | export default connect(mapStateToProps, mapDispatchToProps)(FileName); 482 | ``` 483 | 484 | ### `rfcredux` 485 | 486 | ```javascript 487 | import React, { Component } from "react"; 488 | import { connect } from "react-redux"; 489 | 490 | export const FileName = () => { 491 | return
$4
; 492 | }; 493 | 494 | const mapStateToProps = (state) => ({}); 495 | 496 | const mapDispatchToProps = {}; 497 | 498 | export default connect(mapStateToProps, mapDispatchToProps)(FileName); 499 | ``` 500 | 501 | ### `rfreduxp` 502 | 503 | ```javascript 504 | import React, { Component } from "react"; 505 | import PropTypes from "prop-types"; 506 | import { connect } from "react-redux"; 507 | 508 | export const FileName = () => { 509 | return
$4
; 510 | }; 511 | 512 | FileName.propTypes = { 513 | $2: $3, 514 | }; 515 | 516 | const mapStateToProps = (state) => ({}); 517 | 518 | const mapDispatchToProps = {}; 519 | 520 | export default connect(mapStateToProps, mapDispatchToProps)(FileName); 521 | ``` 522 | 523 | ### `reduxmap` 524 | 525 | ```javascript 526 | const mapStateToProps = (state) => ({}); 527 | 528 | const mapDispatchToProps = {}; 529 | ``` 530 | 531 | ## React Native Components 532 | 533 | ### `rnc` 534 | 535 | ```javascript 536 | import React, { Component } from "react"; 537 | import { Text, View } from "react-native"; 538 | 539 | export default class FileName extends Component { 540 | render() { 541 | return ( 542 | 543 | $2 544 | 545 | ); 546 | } 547 | } 548 | ``` 549 | 550 | ### `rnf` 551 | 552 | ```javascript 553 | import React from "react"; 554 | import { View, Text } from "react-native"; 555 | 556 | export default function $1() { 557 | return ( 558 | 559 | $2 560 | 561 | ); 562 | } 563 | ``` 564 | 565 | ### `rnfs` 566 | 567 | ```javascript 568 | import React from "react"; 569 | import { StyleSheet, View, Text } from "react-native"; 570 | 571 | export default function $1() { 572 | return ( 573 | 574 | $2 575 | 576 | ); 577 | } 578 | 579 | const styles = StyleSheet.create({}); 580 | ``` 581 | 582 | ### `rnfe` 583 | 584 | ```javascript 585 | import React from "react"; 586 | import { View, Text } from "react-native"; 587 | 588 | const $1 = () => { 589 | return ( 590 | 591 | $2 592 | 593 | ); 594 | }; 595 | 596 | export default $1; 597 | ``` 598 | 599 | ### `rnfes` 600 | 601 | ```javascript 602 | import React from "react"; 603 | import { StyleSheet, View, Text } from "react-native"; 604 | 605 | const $1 = () => { 606 | return ( 607 | 608 | $2 609 | 610 | ); 611 | }; 612 | 613 | export default $1; 614 | 615 | const styles = StyleSheet.create({}); 616 | ``` 617 | 618 | ### `rncs` 619 | 620 | ```javascript 621 | import React, { Component } from "react"; 622 | import { Text, StyleSheet, View } from "react-native"; 623 | 624 | export default class FileName extends Component { 625 | render() { 626 | return ( 627 | 628 | $2 629 | 630 | ); 631 | } 632 | } 633 | 634 | const styles = StyleSheet.create({}); 635 | ``` 636 | 637 | ### `rnce` 638 | 639 | ```javascript 640 | import React, { Component } from "react"; 641 | import { Text, View } from "react-native"; 642 | 643 | export class FileName extends Component { 644 | render() { 645 | return ( 646 | 647 | $2 648 | 649 | ); 650 | } 651 | } 652 | 653 | export default $1; 654 | ``` 655 | 656 | ## Others 657 | 658 | ### `cmmb` 659 | 660 | ```JS 661 | /** 662 | |-------------------------------------------------- 663 | | $1 664 | |-------------------------------------------------- 665 | */ 666 | ``` 667 | 668 | ### `desc` 669 | 670 | ```javascript 671 | describe("$1", () => { 672 | $2; 673 | }); 674 | ``` 675 | 676 | ### `test` 677 | 678 | ```javascript 679 | test("should $1", () => { 680 | $2; 681 | }); 682 | ``` 683 | 684 | ### `tit` 685 | 686 | ```javascript 687 | it("should $1", () => { 688 | $2; 689 | }); 690 | ``` 691 | 692 | ### `stest` 693 | 694 | ```javascript 695 | import React from "react"; 696 | import renderer from "react-test-renderer"; 697 | 698 | import { $1 } from "../$1"; 699 | 700 | describe("<$1 />", () => { 701 | const defaultProps = {}; 702 | const wrapper = renderer.create(<$1 {...defaultProps} />); 703 | 704 | test("render", () => { 705 | expect(wrapper).toMatchSnapshot(); 706 | }); 707 | }); 708 | ``` 709 | 710 | ### `srtest` 711 | 712 | ```javascript 713 | import React from "react"; 714 | import renderer from "react-test-renderer"; 715 | import { Provider } from "react-redux"; 716 | 717 | import store from "src/store"; 718 | import { $1 } from "../$1"; 719 | 720 | describe("<$1 />", () => { 721 | const defaultProps = {}; 722 | const wrapper = renderer.create( 723 | 724 | <$1 {...defaultProps} />) 725 | 726 | ); 727 | 728 | test("render", () => { 729 | expect(wrapper).toMatchSnapshot(); 730 | }); 731 | }); 732 | ``` 733 | 734 | ### `sntest` 735 | 736 | ```javascript 737 | import "react-native"; 738 | import React from "react"; 739 | import renderer from "react-test-renderer"; 740 | 741 | import $1 from "../$1"; 742 | 743 | describe("<$1 />", () => { 744 | const defaultProps = {}; 745 | 746 | const wrapper = renderer.create(<$1 {...defaultProps} />); 747 | 748 | test("render", () => { 749 | expect(wrapper).toMatchSnapshot(); 750 | }); 751 | }); 752 | ``` 753 | 754 | ### `snrtest` 755 | 756 | ```javascript 757 | import "react-native"; 758 | import React from "react"; 759 | import renderer from "react-test-renderer"; 760 | import { Provider } from "react-redux"; 761 | 762 | import store from "src/store/configureStore"; 763 | import $1 from "../$1"; 764 | 765 | describe("<$1 />", () => { 766 | const defaultProps = {}; 767 | const wrapper = renderer.create( 768 | 769 | <$1 {...defaultProps} /> 770 | 771 | ); 772 | 773 | test("render", () => { 774 | expect(wrapper).toMatchSnapshot(); 775 | }); 776 | }); 777 | ``` 778 | 779 | ### `hocredux` 780 | 781 | ```javascript 782 | import React from "react"; 783 | import PropTypes from "prop-types"; 784 | import { connect } from "react-redux"; 785 | 786 | export const mapStateToProps = (state) => ({}); 787 | 788 | export const mapDispatchToProps = {}; 789 | 790 | export const $1 = (WrappedComponent) => { 791 | const hocComponent = ({ ...props }) => ; 792 | 793 | hocComponent.propTypes = {}; 794 | 795 | return hocComponent; 796 | }; 797 | 798 | export default (WrapperComponent) => 799 | connect(mapStateToProps, mapDispatchToProps)($1(WrapperComponent)); 800 | ``` 801 | 802 | ### `hoc` 803 | 804 | ```javascript 805 | import React from "react"; 806 | import PropTypes from "prop-types"; 807 | 808 | export default (WrappedComponent) => { 809 | const hocComponent = ({ ...props }) => ; 810 | 811 | hocComponent.propTypes = {}; 812 | 813 | return hocComponent; 814 | }; 815 | ``` 816 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bajrangCoder/acode-react-snippets/03890c4fb1b1866e42656978bcc2c98217c9c748/icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "acode-react-snippets", 3 | "version": "1.0.1", 4 | "description": "Acode plugin for react snippets", 5 | "main": "dist/main.js", 6 | "repository": "https://github.com/bajrangCoder/AcodeTSTemplate.git", 7 | "author": "Raunak Raj", 8 | "license": "MIT", 9 | "dependencies": { 10 | "@types/ace": "^0.0.51", 11 | "global": "^4.4.0", 12 | "html-tag-js": "^1.1.22" 13 | }, 14 | "devDependencies": { 15 | "esbuild": "^0.19.5", 16 | "jszip": "^3.10.1", 17 | "typescript": "^5.1.6" 18 | }, 19 | "scripts": { 20 | "build": "node build.mjs", 21 | "build-ts": "tsc --noEmit && node build.mjs" 22 | }, 23 | "browserslist": [ 24 | "> 0.25%, not dead" 25 | ], 26 | "resolutions": { 27 | "terser": ">=5.14.2 ", 28 | "glob-parent": ">=5.1.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /plugin.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "bajrangcoder.react.snippets", 3 | "name": "Acode ES7+ React/Redux snippets", 4 | "main": "dist/main.js", 5 | "version": "1.0.2", 6 | "readme": "readme.md", 7 | "icon": "icon.png", 8 | "files": [], 9 | "minVersionCode" : 290, 10 | "price": 0, 11 | "author": { 12 | "name": "Raunak Raj", 13 | "email": "bajrangcoders@gmail.com", 14 | "url": "https://github.com/bajrangCoder/acode-react-snippets", 15 | "github": "bajrangCoder" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: '6.0' 2 | 3 | settings: 4 | autoInstallPeers: true 5 | excludeLinksFromLockfile: false 6 | 7 | overrides: 8 | terser: '>=5.14.2 ' 9 | glob-parent: '>=5.1.2' 10 | 11 | dependencies: 12 | '@types/ace': 13 | specifier: ^0.0.51 14 | version: 0.0.51 15 | global: 16 | specifier: ^4.4.0 17 | version: 4.4.0 18 | html-tag-js: 19 | specifier: ^1.1.22 20 | version: 1.1.41 21 | 22 | devDependencies: 23 | esbuild: 24 | specifier: ^0.19.5 25 | version: 0.19.5 26 | jszip: 27 | specifier: ^3.10.1 28 | version: 3.10.1 29 | typescript: 30 | specifier: ^5.1.6 31 | version: 5.2.2 32 | 33 | packages: 34 | 35 | /@esbuild/android-arm64@0.19.5: 36 | resolution: {integrity: sha512-5d1OkoJxnYQfmC+Zd8NBFjkhyCNYwM4n9ODrycTFY6Jk1IGiZ+tjVJDDSwDt77nK+tfpGP4T50iMtVi4dEGzhQ==} 37 | engines: {node: '>=12'} 38 | cpu: [arm64] 39 | os: [android] 40 | requiresBuild: true 41 | dev: true 42 | optional: true 43 | 44 | /@esbuild/android-arm@0.19.5: 45 | resolution: {integrity: sha512-bhvbzWFF3CwMs5tbjf3ObfGqbl/17ict2/uwOSfr3wmxDE6VdS2GqY/FuzIPe0q0bdhj65zQsvqfArI9MY6+AA==} 46 | engines: {node: '>=12'} 47 | cpu: [arm] 48 | os: [android] 49 | requiresBuild: true 50 | dev: true 51 | optional: true 52 | 53 | /@esbuild/android-x64@0.19.5: 54 | resolution: {integrity: sha512-9t+28jHGL7uBdkBjL90QFxe7DVA+KGqWlHCF8ChTKyaKO//VLuoBricQCgwhOjA1/qOczsw843Fy4cbs4H3DVA==} 55 | engines: {node: '>=12'} 56 | cpu: [x64] 57 | os: [android] 58 | requiresBuild: true 59 | dev: true 60 | optional: true 61 | 62 | /@esbuild/darwin-arm64@0.19.5: 63 | resolution: {integrity: sha512-mvXGcKqqIqyKoxq26qEDPHJuBYUA5KizJncKOAf9eJQez+L9O+KfvNFu6nl7SCZ/gFb2QPaRqqmG0doSWlgkqw==} 64 | engines: {node: '>=12'} 65 | cpu: [arm64] 66 | os: [darwin] 67 | requiresBuild: true 68 | dev: true 69 | optional: true 70 | 71 | /@esbuild/darwin-x64@0.19.5: 72 | resolution: {integrity: sha512-Ly8cn6fGLNet19s0X4unjcniX24I0RqjPv+kurpXabZYSXGM4Pwpmf85WHJN3lAgB8GSth7s5A0r856S+4DyiA==} 73 | engines: {node: '>=12'} 74 | cpu: [x64] 75 | os: [darwin] 76 | requiresBuild: true 77 | dev: true 78 | optional: true 79 | 80 | /@esbuild/freebsd-arm64@0.19.5: 81 | resolution: {integrity: sha512-GGDNnPWTmWE+DMchq1W8Sd0mUkL+APvJg3b11klSGUDvRXh70JqLAO56tubmq1s2cgpVCSKYywEiKBfju8JztQ==} 82 | engines: {node: '>=12'} 83 | cpu: [arm64] 84 | os: [freebsd] 85 | requiresBuild: true 86 | dev: true 87 | optional: true 88 | 89 | /@esbuild/freebsd-x64@0.19.5: 90 | resolution: {integrity: sha512-1CCwDHnSSoA0HNwdfoNY0jLfJpd7ygaLAp5EHFos3VWJCRX9DMwWODf96s9TSse39Br7oOTLryRVmBoFwXbuuQ==} 91 | engines: {node: '>=12'} 92 | cpu: [x64] 93 | os: [freebsd] 94 | requiresBuild: true 95 | dev: true 96 | optional: true 97 | 98 | /@esbuild/linux-arm64@0.19.5: 99 | resolution: {integrity: sha512-o3vYippBmSrjjQUCEEiTZ2l+4yC0pVJD/Dl57WfPwwlvFkrxoSO7rmBZFii6kQB3Wrn/6GwJUPLU5t52eq2meA==} 100 | engines: {node: '>=12'} 101 | cpu: [arm64] 102 | os: [linux] 103 | requiresBuild: true 104 | dev: true 105 | optional: true 106 | 107 | /@esbuild/linux-arm@0.19.5: 108 | resolution: {integrity: sha512-lrWXLY/vJBzCPC51QN0HM71uWgIEpGSjSZZADQhq7DKhPcI6NH1IdzjfHkDQws2oNpJKpR13kv7/pFHBbDQDwQ==} 109 | engines: {node: '>=12'} 110 | cpu: [arm] 111 | os: [linux] 112 | requiresBuild: true 113 | dev: true 114 | optional: true 115 | 116 | /@esbuild/linux-ia32@0.19.5: 117 | resolution: {integrity: sha512-MkjHXS03AXAkNp1KKkhSKPOCYztRtK+KXDNkBa6P78F8Bw0ynknCSClO/ztGszILZtyO/lVKpa7MolbBZ6oJtQ==} 118 | engines: {node: '>=12'} 119 | cpu: [ia32] 120 | os: [linux] 121 | requiresBuild: true 122 | dev: true 123 | optional: true 124 | 125 | /@esbuild/linux-loong64@0.19.5: 126 | resolution: {integrity: sha512-42GwZMm5oYOD/JHqHska3Jg0r+XFb/fdZRX+WjADm3nLWLcIsN27YKtqxzQmGNJgu0AyXg4HtcSK9HuOk3v1Dw==} 127 | engines: {node: '>=12'} 128 | cpu: [loong64] 129 | os: [linux] 130 | requiresBuild: true 131 | dev: true 132 | optional: true 133 | 134 | /@esbuild/linux-mips64el@0.19.5: 135 | resolution: {integrity: sha512-kcjndCSMitUuPJobWCnwQ9lLjiLZUR3QLQmlgaBfMX23UEa7ZOrtufnRds+6WZtIS9HdTXqND4yH8NLoVVIkcg==} 136 | engines: {node: '>=12'} 137 | cpu: [mips64el] 138 | os: [linux] 139 | requiresBuild: true 140 | dev: true 141 | optional: true 142 | 143 | /@esbuild/linux-ppc64@0.19.5: 144 | resolution: {integrity: sha512-yJAxJfHVm0ZbsiljbtFFP1BQKLc8kUF6+17tjQ78QjqjAQDnhULWiTA6u0FCDmYT1oOKS9PzZ2z0aBI+Mcyj7Q==} 145 | engines: {node: '>=12'} 146 | cpu: [ppc64] 147 | os: [linux] 148 | requiresBuild: true 149 | dev: true 150 | optional: true 151 | 152 | /@esbuild/linux-riscv64@0.19.5: 153 | resolution: {integrity: sha512-5u8cIR/t3gaD6ad3wNt1MNRstAZO+aNyBxu2We8X31bA8XUNyamTVQwLDA1SLoPCUehNCymhBhK3Qim1433Zag==} 154 | engines: {node: '>=12'} 155 | cpu: [riscv64] 156 | os: [linux] 157 | requiresBuild: true 158 | dev: true 159 | optional: true 160 | 161 | /@esbuild/linux-s390x@0.19.5: 162 | resolution: {integrity: sha512-Z6JrMyEw/EmZBD/OFEFpb+gao9xJ59ATsoTNlj39jVBbXqoZm4Xntu6wVmGPB/OATi1uk/DB+yeDPv2E8PqZGw==} 163 | engines: {node: '>=12'} 164 | cpu: [s390x] 165 | os: [linux] 166 | requiresBuild: true 167 | dev: true 168 | optional: true 169 | 170 | /@esbuild/linux-x64@0.19.5: 171 | resolution: {integrity: sha512-psagl+2RlK1z8zWZOmVdImisMtrUxvwereIdyJTmtmHahJTKb64pAcqoPlx6CewPdvGvUKe2Jw+0Z/0qhSbG1A==} 172 | engines: {node: '>=12'} 173 | cpu: [x64] 174 | os: [linux] 175 | requiresBuild: true 176 | dev: true 177 | optional: true 178 | 179 | /@esbuild/netbsd-x64@0.19.5: 180 | resolution: {integrity: sha512-kL2l+xScnAy/E/3119OggX8SrWyBEcqAh8aOY1gr4gPvw76la2GlD4Ymf832UCVbmuWeTf2adkZDK+h0Z/fB4g==} 181 | engines: {node: '>=12'} 182 | cpu: [x64] 183 | os: [netbsd] 184 | requiresBuild: true 185 | dev: true 186 | optional: true 187 | 188 | /@esbuild/openbsd-x64@0.19.5: 189 | resolution: {integrity: sha512-sPOfhtzFufQfTBgRnE1DIJjzsXukKSvZxloZbkJDG383q0awVAq600pc1nfqBcl0ice/WN9p4qLc39WhBShRTA==} 190 | engines: {node: '>=12'} 191 | cpu: [x64] 192 | os: [openbsd] 193 | requiresBuild: true 194 | dev: true 195 | optional: true 196 | 197 | /@esbuild/sunos-x64@0.19.5: 198 | resolution: {integrity: sha512-dGZkBXaafuKLpDSjKcB0ax0FL36YXCvJNnztjKV+6CO82tTYVDSH2lifitJ29jxRMoUhgkg9a+VA/B03WK5lcg==} 199 | engines: {node: '>=12'} 200 | cpu: [x64] 201 | os: [sunos] 202 | requiresBuild: true 203 | dev: true 204 | optional: true 205 | 206 | /@esbuild/win32-arm64@0.19.5: 207 | resolution: {integrity: sha512-dWVjD9y03ilhdRQ6Xig1NWNgfLtf2o/STKTS+eZuF90fI2BhbwD6WlaiCGKptlqXlURVB5AUOxUj09LuwKGDTg==} 208 | engines: {node: '>=12'} 209 | cpu: [arm64] 210 | os: [win32] 211 | requiresBuild: true 212 | dev: true 213 | optional: true 214 | 215 | /@esbuild/win32-ia32@0.19.5: 216 | resolution: {integrity: sha512-4liggWIA4oDgUxqpZwrDhmEfAH4d0iljanDOK7AnVU89T6CzHon/ony8C5LeOdfgx60x5cnQJFZwEydVlYx4iw==} 217 | engines: {node: '>=12'} 218 | cpu: [ia32] 219 | os: [win32] 220 | requiresBuild: true 221 | dev: true 222 | optional: true 223 | 224 | /@esbuild/win32-x64@0.19.5: 225 | resolution: {integrity: sha512-czTrygUsB/jlM8qEW5MD8bgYU2Xg14lo6kBDXW6HdxKjh8M5PzETGiSHaz9MtbXBYDloHNUAUW2tMiKW4KM9Mw==} 226 | engines: {node: '>=12'} 227 | cpu: [x64] 228 | os: [win32] 229 | requiresBuild: true 230 | dev: true 231 | optional: true 232 | 233 | /@types/ace@0.0.51: 234 | resolution: {integrity: sha512-3dkbu9tv6klSmBG3GbDPInKKSuCaZ6HU/OMVPVtYfy+CZiegteTcvEIkFlYRnBjvfGkqpPcf6r4aYKSgNgo5GA==} 235 | dev: false 236 | 237 | /core-util-is@1.0.3: 238 | resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} 239 | dev: true 240 | 241 | /dom-walk@0.1.2: 242 | resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==} 243 | dev: false 244 | 245 | /esbuild@0.19.5: 246 | resolution: {integrity: sha512-bUxalY7b1g8vNhQKdB24QDmHeY4V4tw/s6Ak5z+jJX9laP5MoQseTOMemAr0gxssjNcH0MCViG8ONI2kksvfFQ==} 247 | engines: {node: '>=12'} 248 | hasBin: true 249 | requiresBuild: true 250 | optionalDependencies: 251 | '@esbuild/android-arm': 0.19.5 252 | '@esbuild/android-arm64': 0.19.5 253 | '@esbuild/android-x64': 0.19.5 254 | '@esbuild/darwin-arm64': 0.19.5 255 | '@esbuild/darwin-x64': 0.19.5 256 | '@esbuild/freebsd-arm64': 0.19.5 257 | '@esbuild/freebsd-x64': 0.19.5 258 | '@esbuild/linux-arm': 0.19.5 259 | '@esbuild/linux-arm64': 0.19.5 260 | '@esbuild/linux-ia32': 0.19.5 261 | '@esbuild/linux-loong64': 0.19.5 262 | '@esbuild/linux-mips64el': 0.19.5 263 | '@esbuild/linux-ppc64': 0.19.5 264 | '@esbuild/linux-riscv64': 0.19.5 265 | '@esbuild/linux-s390x': 0.19.5 266 | '@esbuild/linux-x64': 0.19.5 267 | '@esbuild/netbsd-x64': 0.19.5 268 | '@esbuild/openbsd-x64': 0.19.5 269 | '@esbuild/sunos-x64': 0.19.5 270 | '@esbuild/win32-arm64': 0.19.5 271 | '@esbuild/win32-ia32': 0.19.5 272 | '@esbuild/win32-x64': 0.19.5 273 | dev: true 274 | 275 | /global@4.4.0: 276 | resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==} 277 | dependencies: 278 | min-document: 2.19.0 279 | process: 0.11.10 280 | dev: false 281 | 282 | /html-tag-js@1.1.41: 283 | resolution: {integrity: sha512-qh2R/nsggDqaUB78STw8hbA6O1AHdr3+3FcC17D5YUgqK7hNQEbnZS1qT9t087F3r8FIVy9EIkWAATTjCU/2Yg==} 284 | dev: false 285 | 286 | /immediate@3.0.6: 287 | resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==} 288 | dev: true 289 | 290 | /inherits@2.0.4: 291 | resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} 292 | dev: true 293 | 294 | /isarray@1.0.0: 295 | resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==} 296 | dev: true 297 | 298 | /jszip@3.10.1: 299 | resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==} 300 | dependencies: 301 | lie: 3.3.0 302 | pako: 1.0.11 303 | readable-stream: 2.3.8 304 | setimmediate: 1.0.5 305 | dev: true 306 | 307 | /lie@3.3.0: 308 | resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==} 309 | dependencies: 310 | immediate: 3.0.6 311 | dev: true 312 | 313 | /min-document@2.19.0: 314 | resolution: {integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==} 315 | dependencies: 316 | dom-walk: 0.1.2 317 | dev: false 318 | 319 | /pako@1.0.11: 320 | resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==} 321 | dev: true 322 | 323 | /process-nextick-args@2.0.1: 324 | resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} 325 | dev: true 326 | 327 | /process@0.11.10: 328 | resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==} 329 | engines: {node: '>= 0.6.0'} 330 | dev: false 331 | 332 | /readable-stream@2.3.8: 333 | resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==} 334 | dependencies: 335 | core-util-is: 1.0.3 336 | inherits: 2.0.4 337 | isarray: 1.0.0 338 | process-nextick-args: 2.0.1 339 | safe-buffer: 5.1.2 340 | string_decoder: 1.1.1 341 | util-deprecate: 1.0.2 342 | dev: true 343 | 344 | /safe-buffer@5.1.2: 345 | resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==} 346 | dev: true 347 | 348 | /setimmediate@1.0.5: 349 | resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==} 350 | dev: true 351 | 352 | /string_decoder@1.1.1: 353 | resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==} 354 | dependencies: 355 | safe-buffer: 5.1.2 356 | dev: true 357 | 358 | /typescript@5.2.2: 359 | resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==} 360 | engines: {node: '>=14.17'} 361 | hasBin: true 362 | dev: true 363 | 364 | /util-deprecate@1.0.2: 365 | resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} 366 | dev: true 367 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Acode ES7+ React/Redux Snippets 2 | 3 | This Acode plugin provides a collection of ES7+ React/Redux snippets to enhance your development workflow on mobile. Special thanks to MatrixCoder for contributing to snippet content. Inspiration for this plugin is drawn from the VS Code ES7+ React/Redux/React-Native/JS snippets extension. 4 | 5 | > [!NOTE] 6 | > This plugin also adds docs for snippet 7 | 8 |
9 | Updates 💥 10 |
11 | v1.0.1 12 | 13 | added a html to jsx converter 14 |
15 |
16 | v1.0.2 17 | 18 | - Updated docs 19 | - added more javascript related snippets by @ezeaniiandrew 20 | - added a setting to enable snippet docs 21 |
22 |
23 | 24 | ## Features 25 | 26 | - Comprehensive snippets for React, Redux, and Typescript development in ES7+ syntax. 27 | - Works specifically in `.jsx` and `.tsx` files but some javascript syntax also works in javascript mode 28 | - built-in html to jsx converter 29 | 30 | ## Usage 31 | 32 | 1. Install Acode on your mobile device. 33 | 2. Install this plugin to unlock a variety of React/Redux snippets. 34 | 3. Open a `.jsx` or `.tsx` file and start typing the snippet prefix to trigger autocompletion. 35 | 36 | > Snippet docs 👉 [here](https://github.com/bajrangCoder/acode-react-snippets/blob/main/docs/Snippets.md) 37 | 38 | ## How to Use HTML2JSX converter? 39 | 40 | - select the part of html code in jsx or tsx file and press `JSX` option from selection menu to convert it. 41 | 42 | ## Contribution 43 | 44 | Feel free to contribute by submitting bug reports, feature requests, or additional snippets. We appreciate your input to make this plugin even more valuable for the Acode community. 45 | 46 | ## Special Thanks 47 | 48 | - [MatrixCoder](https://github.com/matrixcoder) for contributing in Snippet. Buy Me A Pizza 49 | 50 | - [@ezeaniiandrew](https://github.com/ezeaniiandrew) for contributing in javascript snippets 51 | 52 | - [VS Code ES7+ React/Redux/React-Native/JS snippets](https://github.com/ults-io/vscode-react-javascript-snippets/) for inspiration. 53 | 54 | ## Donate 55 | 56 | If you find this plugin helpful, consider supporting the developers by making a donation(through ko-fi you can donate just $1). Your contribution goes a long way in ensuring the continuous improvement of this plugin. 57 | 58 | Buy Me A Coffee 59 | 60 | Buy Me a Coffee at ko-fi.com 61 | 62 | 63 | Happy coding with Acode and these handy React/Redux snippets! 🚀 64 | -------------------------------------------------------------------------------- /src/helpers.ts: -------------------------------------------------------------------------------- 1 | import convert from './htmltojsx.js'; 2 | 3 | export function getCurrentFileType(session: any): string { 4 | /* 5 | returns the file type of current file 6 | */ 7 | const sessionNme = session.getMode().$id; 8 | const sessionNmeParts = sessionNme.split("/"); 9 | return sessionNmeParts[sessionNmeParts.length - 1]; 10 | } 11 | 12 | export function htmltojsx(input: string): string { 13 | /* 14 | Convert given input to jsx string 15 | */ 16 | let output: string; 17 | output = convert(input); 18 | return output; 19 | } -------------------------------------------------------------------------------- /src/htmltojsx.js: -------------------------------------------------------------------------------- 1 | 2 | var attrs = [ 3 | 'accept', 4 | 'acceptCharset', 5 | 'accessKey', 6 | 'action', 7 | 'allowFullScreen', 8 | 'allowTransparency', 9 | 'alt', 10 | 'async', 11 | 'autoComplete', 12 | 'autoFocus', 13 | 'autoPlay', 14 | 'capture', 15 | 'cellPadding', 16 | 'cellSpacing', 17 | 'charSet', 18 | 'challenge', 19 | 'checked', 20 | 'classID', 21 | 'className', 22 | 'cols', 23 | 'colSpan', 24 | 'content', 25 | 'contentEditable', 26 | 'contextMenu', 27 | 'controls', 28 | 'coords', 29 | 'crossOrigin', 30 | 'data', 31 | 'dateTime', 32 | 'defer', 33 | 'dir', 34 | 'disabled', 35 | 'download', 36 | 'draggable', 37 | 'encType', 38 | 'form', 39 | 'formAction', 40 | 'formEncType', 41 | 'formMethod', 42 | 'formNoValidate', 43 | 'formTarget', 44 | 'frameBorder', 45 | 'headers', 46 | 'height', 47 | 'hidden', 48 | 'high', 49 | 'href', 50 | 'hrefLang', 51 | 'htmlFor', 52 | 'httpEquiv', 53 | 'icon', 54 | 'id', 55 | 'inputMode', 56 | 'keyParams', 57 | 'keyType', 58 | 'label', 59 | 'lang', 60 | 'list', 61 | 'loop', 62 | 'low', 63 | 'manifest', 64 | 'marginHeight', 65 | 'marginWidth', 66 | 'max', 67 | 'maxLength', 68 | 'media', 69 | 'mediaGroup', 70 | 'method', 71 | 'min', 72 | 'minLength', 73 | 'multiple', 74 | 'muted', 75 | 'name', 76 | 'noValidate', 77 | 'open', 78 | 'optimum', 79 | 'pattern', 80 | 'placeholder', 81 | 'poster', 82 | 'preload', 83 | 'radioGroup', 84 | 'readOnly', 85 | 'rel', 86 | 'required', 87 | 'role', 88 | 'rows', 89 | 'rowSpan', 90 | 'sandbox', 91 | 'scope', 92 | 'scoped', 93 | 'scrolling', 94 | 'seamless', 95 | 'selected', 96 | 'shape', 97 | 'size', 98 | 'sizes', 99 | 'span', 100 | 'spellCheck', 101 | 'src', 102 | 'srcDoc', 103 | 'srcSet', 104 | 'start', 105 | 'step', 106 | 'style', 107 | 'summary', 108 | 'tabIndex', 109 | 'target', 110 | 'title', 111 | 'type', 112 | 'useMap', 113 | 'value', 114 | 'width', 115 | 'wmode', 116 | 'wrap' 117 | ]; 118 | 119 | function convert(html) { 120 | // add root element 121 | var wrapper = document.createElement('div'); 122 | wrapper.innerHTML = html; 123 | if (wrapper.children.length > 1) { 124 | html = '
' + html + '
'; 125 | } 126 | 127 | html = html 128 | .replace(/\sclass=/g, ' className=') 129 | .replace(/\sfor=/g, ' htmlFor=') 130 | // replace comments 131 | .replace(//g, '*/}'); 133 | 134 | [ 135 | "area", 136 | "base", 137 | "br", 138 | "col", 139 | "command", 140 | "embed", 141 | "hr", 142 | "img", 143 | "input", 144 | "keygen", 145 | "link", 146 | "meta", 147 | "param", 148 | "source", 149 | "track", 150 | "wbr" 151 | ].forEach(function (tag) { 152 | var regex = new RegExp('<(' + tag + '[^/]*?)>', 'g'); 153 | html = html 154 | .replace(regex, function (_, str) { 155 | return '<' + str + '/>'; 156 | }); 157 | }); 158 | 159 | // replace attrNames 160 | attrs.forEach(function(attr) { 161 | var origin_attr = attr.toLowerCase(); 162 | var regex = new RegExp('\\s' + origin_attr + '=', 'g'); 163 | html = html.replace(regex, ' ' + attr + '='); 164 | }); 165 | 166 | // replace styles 167 | html = html.replace(/\sstyle="(.+?)"/g, function(attr, styles){ 168 | var jsxStyles = new StyleParser(styles).toJSXString(); 169 | return " style={{" + jsxStyles + "}}"; 170 | }); 171 | return html; 172 | } 173 | 174 | module.exports = convert; 175 | 176 | // Codes below are copied from Facebook's html to jsx module. 177 | 178 | /** 179 | * Repeats a string a certain number of times. 180 | * Also: the future is bright and consists of native string repetition: 181 | * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat 182 | * 183 | * @param {string} string String to repeat 184 | * @param {number} times Number of times to repeat string. Integer. 185 | * @see http://jsperf.com/string-repeater/2 186 | */ 187 | function repeatString(string, times) { 188 | if (times === 1) { 189 | return string; 190 | } 191 | if (times < 0) { throw new Error(); } 192 | var repeated = ''; 193 | while (times) { 194 | if (times & 1) { 195 | repeated += string; 196 | } 197 | if (times >>= 1) { 198 | string += string; 199 | } 200 | } 201 | return repeated; 202 | } 203 | 204 | /** 205 | * Determine if the string ends with the specified substring. 206 | * 207 | * @param {string} haystack String to search in 208 | * @param {string} needle String to search for 209 | * @return {boolean} 210 | */ 211 | function endsWith(haystack, needle) { 212 | return haystack.slice(-needle.length) === needle; 213 | } 214 | 215 | /** 216 | * Trim the specified substring off the string. If the string does not end 217 | * with the specified substring, this is a no-op. 218 | * 219 | * @param {string} haystack String to search in 220 | * @param {string} needle String to search for 221 | * @return {string} 222 | */ 223 | function trimEnd(haystack, needle) { 224 | return endsWith(haystack, needle) 225 | ? haystack.slice(0, -needle.length) 226 | : haystack; 227 | } 228 | 229 | /** 230 | * Convert a hyphenated string to camelCase. 231 | */ 232 | function hyphenToCamelCase(string) { 233 | return string.replace(/-(.)/g, function(match, chr) { 234 | return chr.toUpperCase(); 235 | }); 236 | } 237 | 238 | /** 239 | * Determines if the specified string consists entirely of whitespace. 240 | */ 241 | function isEmpty(string) { 242 | return !/[^\s]/.test(string); 243 | } 244 | 245 | /** 246 | * Determines if the specified string consists entirely of numeric characters. 247 | */ 248 | function isNumeric(input) { 249 | return input !== undefined 250 | && input !== null 251 | && (typeof input === 'number' || parseInt(input, 10) == input); 252 | } 253 | 254 | /** 255 | * Handles parsing of inline styles 256 | * 257 | * @param {string} rawStyle Raw style attribute 258 | * @constructor 259 | */ 260 | var StyleParser = function(rawStyle) { 261 | this.parse(rawStyle); 262 | }; 263 | StyleParser.prototype = { 264 | /** 265 | * Parse the specified inline style attribute value 266 | * @param {string} rawStyle Raw style attribute 267 | */ 268 | parse: function(rawStyle) { 269 | this.styles = {}; 270 | rawStyle.split(';').forEach(function(style) { 271 | style = style.trim(); 272 | var firstColon = style.indexOf(':'); 273 | var key = style.substr(0, firstColon); 274 | var value = style.substr(firstColon + 1).trim(); 275 | if (key !== '') { 276 | this.styles[key] = value; 277 | } 278 | }, this); 279 | }, 280 | 281 | /** 282 | * Convert the style information represented by this parser into a JSX 283 | * string 284 | * 285 | * @return {string} 286 | */ 287 | toJSXString: function() { 288 | var output = []; 289 | for (var key in this.styles) { 290 | if (!this.styles.hasOwnProperty(key)) { 291 | continue; 292 | } 293 | output.push(this.toJSXKey(key) + ': ' + this.toJSXValue(this.styles[key])); 294 | } 295 | return output.join(', '); 296 | }, 297 | 298 | /** 299 | * Convert the CSS style key to a JSX style key 300 | * 301 | * @param {string} key CSS style key 302 | * @return {string} JSX style key 303 | */ 304 | toJSXKey: function(key) { 305 | return hyphenToCamelCase(key); 306 | }, 307 | 308 | /** 309 | * Convert the CSS style value to a JSX style value 310 | * 311 | * @param {string} value CSS style value 312 | * @return {string} JSX style value 313 | */ 314 | toJSXValue: function(value) { 315 | if (isNumeric(value)) { 316 | // If numeric, no quotes 317 | return value; 318 | } else { 319 | // Proably a string, wrap it in quotes 320 | return '\'' + value.replace(/'/g, '"') + '\''; 321 | } 322 | } 323 | }; -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import plugin from "../plugin.json"; 2 | import { getCurrentFileType, htmltojsx } from "./helpers"; 3 | import { snippets, Snippet } from "./snippets"; 4 | const { snippetManager } = ace.require("ace/snippets"); 5 | const selectionMenu = acode.require('selectionMenu'); 6 | const appSettings = acode.require("settings"); 7 | const { editor } = editorManager; 8 | 9 | declare var extraSyntaxHighlightsInstalled: boolean; 10 | 11 | class ReactSnippet { 12 | public baseUrl: string | undefined; 13 | private reactCompleter: any; 14 | 15 | constructor() { 16 | this.setVariables(); 17 | this.initializeAutocompletion(snippets || []); 18 | if (!appSettings.value[plugin.id]) { 19 | appSettings.value[plugin.id] = { 20 | snippetDocs: false, 21 | }; 22 | appSettings.update(false); 23 | } 24 | } 25 | 26 | private setVariables() { 27 | /* 28 | set FILE_NAME variable in ace 29 | */ 30 | const { variables } = snippetManager; 31 | variables.FILE_NAME = () => { 32 | const fileNameWithExtension = editorManager.activeFile.filename; 33 | const lastDotIndex = fileNameWithExtension.lastIndexOf("."); 34 | const fileNameWithoutExtension = fileNameWithExtension.slice( 35 | 0, 36 | lastDotIndex 37 | ); 38 | return fileNameWithoutExtension; 39 | }; 40 | } 41 | 42 | private initializeAutocompletion(snippets: Snippet[] | []): void { 43 | this.reactCompleter = { 44 | getCompletions: ( 45 | editor: AceAjax.Editor, 46 | session: any, 47 | pos: AceAjax.Position, 48 | prefix: string, 49 | callback: (err: any, results: AceAjax.Completion[]) => void 50 | ) => { 51 | const currentFileType = getCurrentFileType(session); 52 | //check for file types 53 | const relevantSnippets = snippets.filter(s => 54 | s.fileTypes.includes(currentFileType) 55 | ); 56 | 57 | if (relevantSnippets.length > 0) { 58 | callback( 59 | null, 60 | relevantSnippets.map(snippet => { 61 | const baseSnippet = { 62 | caption: snippet.prefix, 63 | snippet: snippet.snippet, 64 | meta: snippet.type, 65 | value: snippet.snippet, 66 | type: "snippet", 67 | docHTML: snippet.description || "" 68 | }; 69 | if ( 70 | typeof extraSyntaxHighlightsInstalled !== 71 | "undefined" && 72 | extraSyntaxHighlightsInstalled 73 | ) { 74 | return { 75 | ...baseSnippet, 76 | icon: "icon react-snippet-icon" 77 | }; 78 | } else { 79 | return baseSnippet; 80 | } 81 | }) 82 | ); 83 | } else { 84 | callback(null, []); 85 | } 86 | } 87 | }; 88 | 89 | editor.completers.unshift(this.reactCompleter); 90 | } 91 | 92 | async init( 93 | $page: WCPage, 94 | cacheFile: any, 95 | cacheFileUrl: string 96 | ): Promise { 97 | if(this.settings.snippetDocs){ 98 | const styling = document.createElement("style"); 99 | styling.id = "overideCompletionDocs"; 100 | styling.innerHTML = ` 101 | .ace_tooltip.ace_doc-tooltip { 102 | display: flex !important; 103 | background-color: var(--secondary-color); 104 | color: var(--secondary-text-color); 105 | max-width: 68%; 106 | white-space: pre-wrap; 107 | } 108 | `; 109 | document.head.append(styling); 110 | } 111 | acode.addIcon("react-snippet-icon", this.baseUrl + "icon.png"); 112 | selectionMenu.add(this.convertToJsx.bind(this), 'JSX', 'selected'); 113 | } 114 | 115 | convertToJsx(){ 116 | let selectionRange = editor.getSelectionRange(); 117 | let selectedText = editor.getSelectedText(); 118 | let convertedTxt = htmltojsx(selectedText); 119 | editor.getSession().replace(selectionRange, convertedTxt); 120 | window.toast("Converted 💥", 3000); 121 | } 122 | 123 | public get settingsObj() { 124 | return { 125 | list: [ 126 | { 127 | key: "snippetDocs", 128 | text: "Enable snippet docs", 129 | checkbox: !!this.settings.snippetDocs, 130 | info: `To show brief docs about the snippets`, 131 | } 132 | ], 133 | cb: (key: string, value: boolean | string) => { 134 | this.settings[key] = value; 135 | appSettings.update(); 136 | if(value==true){ 137 | const styling = document.createElement("style"); 138 | styling.id = "overideCompletionDocs"; 139 | styling.innerHTML = ` 140 | .ace_tooltip.ace_doc-tooltip { 141 | display: flex !important; 142 | background-color: var(--secondary-color); 143 | color: var(--secondary-text-color); 144 | max-width: 68%; 145 | white-space: pre-wrap; 146 | } 147 | `; 148 | document.head.append(styling); 149 | } else if(value==false){ 150 | document.querySelector("overideCompletionDocs").remove(); 151 | } 152 | }, 153 | } 154 | } 155 | 156 | private get settings() { 157 | return appSettings.value[plugin.id]; 158 | } 159 | 160 | async destroy() { 161 | editor.completers.splice( 162 | editor.completers.indexOf(this.reactCompleter), 163 | 1 164 | ); 165 | document.querySelector("overideCompletionDocs").remove(); 166 | } 167 | } 168 | 169 | if (window.acode) { 170 | const acodePlugin = new ReactSnippet(); 171 | acode.setPluginInit( 172 | plugin.id, 173 | async ( 174 | baseUrl: string, 175 | $page: WCPage, 176 | { cacheFileUrl, cacheFile }: any 177 | ) => { 178 | if (!baseUrl.endsWith("/")) { 179 | baseUrl += "/"; 180 | } 181 | acodePlugin.baseUrl = baseUrl; 182 | await acodePlugin.init($page, cacheFile, cacheFileUrl); 183 | }, 184 | acodePlugin.settingsObj 185 | ); 186 | acode.setPluginUnmount(plugin.id, () => { 187 | acodePlugin.destroy(); 188 | }); 189 | } 190 | -------------------------------------------------------------------------------- /src/snippets.ts: -------------------------------------------------------------------------------- 1 | export interface Snippet { 2 | prefix: string; 3 | snippet: string; 4 | type: string; 5 | description?: string; 6 | fileTypes: string[]; 7 | } 8 | 9 | // snippets array 10 | export const snippets: Snippet[] = [ 11 | // components snippets 12 | { 13 | prefix: "rcc", 14 | snippet: 15 | "import React, { Component } from 'react'\n\nexport default class ${FILE_NAME} extends Component {\n render() {\n return (\n
$1
\n )\n}\n}", 16 | type: "Components", 17 | description: 18 | "Creates a React component class with ES7 module system", 19 | fileTypes: ["jsx", "tsx"], 20 | }, 21 | { 22 | prefix: "rce", 23 | snippet: 24 | "import React, { Component } from 'react'\n\nexport class ${FILE_NAME} extends Component {\n render() {\n return (\n
$1
\n )\n }\n}\n\nexport default ${FILE_NAME}", 25 | type: "Components", 26 | description: 27 | "Creates a React component class with ES7 module system", 28 | fileTypes: ["jsx", "tsx"], 29 | }, 30 | { 31 | prefix: "rfce", 32 | snippet: 33 | "import React from 'react'\n\nconst ${FILE_NAME} = () => {\n return (\n
$1
\n )\n}\n\nexport default ${FILE_NAME}", 34 | type: "Components", 35 | description: 36 | "Creates a React Arrow Function component with ES7 module system", 37 | fileTypes: ["jsx", "tsx"], 38 | }, 39 | { 40 | prefix: "rfc", 41 | snippet: 42 | "import React from 'react'\n\nexport default function ${FILE_NAME}() {\n return (\n
$1
\n )\n}", 43 | type: "Components", 44 | description: 45 | "Creates a React Functional component with ES7 module system", 46 | fileTypes: ["jsx", "tsx"], 47 | }, 48 | { 49 | prefix: "rfcp", 50 | snippet: 51 | "import React from 'react'\nimport PropTypes from 'prop-types'\n\nfunction ${FILE_NAME}(props) {\n return (\n
$1
\n )\n}\n\n${FILE_NAME}.propTypes = {}\n\nexport default ${FILE_NAME}", 52 | type: "Components", 53 | description: 54 | "Creates a React Functional component with PropTypes and ES7 module system", 55 | fileTypes: ["jsx", "tsx"], 56 | }, 57 | { 58 | prefix: "rafce", 59 | snippet: 60 | "import React from 'react'\n\nconst ${FILE_NAME} = () => {\n return (\n
$1
\n )\n}\n\nexport default ${FILE_NAME}", 61 | type: "Components", 62 | description: 63 | "Creates a React Arrow Function component with ES7 module system", 64 | fileTypes: ["jsx", "tsx"], 65 | }, 66 | { 67 | prefix: "rafc", 68 | snippet: 69 | "import React from 'react'\n\nexport const ${FILE_NAME} = () => {\n return (\n
$1
\n )\n}", 70 | type: "Components", 71 | description: 72 | "Creates a React Arrow Function component with ES7 module system", 73 | fileTypes: ["jsx", "tsx"], 74 | }, 75 | { 76 | prefix: "rafcp", 77 | snippet: 78 | "import React from 'react'\nimport PropTypes from 'prop-types'\n\nconst ${FILE_NAME} = props => {\n return (\n
$1
\n )\n}\n\n${FILE_NAME}.propTypes = {}\n\nexport default ${FILE_NAME}", 79 | type: "Components", 80 | description: 81 | "Creates a React Arrow Function component with PropTypes and ES7 module system", 82 | fileTypes: ["jsx", "tsx"], 83 | }, 84 | { 85 | prefix: "rcep", 86 | snippet: 87 | "import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nexport class ${FILE_NAME} extends Component {\n static propTypes = {}\n render() {\n return (\n
$1
\n )\n }\n}\n\nexport default ${FILE_NAME}", 88 | type: "Components", 89 | description: 90 | "Creates a React component class with PropTypes and ES7 module system", 91 | fileTypes: ["jsx", "tsx"], 92 | }, 93 | { 94 | prefix: "rpc", 95 | snippet: 96 | "import React, { PureComponent } from 'react'\n\nexport default class ${FILE_NAME} extends PureComponent {\n render() {\n return (\n
$1
\n )\n }\n}", 97 | type: "Components", 98 | description: 99 | "Creates a React pure component class with ES7 module system", 100 | fileTypes: ["jsx", "tsx"], 101 | }, 102 | { 103 | prefix: "rpce", 104 | snippet: 105 | "import React, { PureComponent } from 'react'\n\nexport class ${FILE_NAME} extends PureComponent {\n render() {\n return (\n
$1
\n )\n }\n}\n\nexport default ${FILE_NAME}", 106 | type: "Components", 107 | description: 108 | "Creates a React pure component class with ES7 module system export", 109 | fileTypes: ["jsx", "tsx"], 110 | }, 111 | { 112 | prefix: "rpcp", 113 | snippet: 114 | "import React, { PureComponent } from 'react'\nimport PropTypes from 'prop-types'\n\nexport default class ${FILE_NAME} extends PureComponent {\n static propTypes = {}\n render() {\n return (\n
$1
\n )\n }\n}", 115 | type: "Components", 116 | description: 117 | "Creates a React pure component class with PropTypes and ES7 module system", 118 | fileTypes: ["jsx", "tsx"], 119 | }, 120 | { 121 | prefix: "rmc", 122 | snippet: 123 | "import React, { memo } from 'react'\n\nconst ${FILE_NAME} = memo(() => {\n return (\n
$1
\n )\n})\n\nexport default ${FILE_NAME}", 124 | type: "Components", 125 | description: 126 | "Creates a React Memo Function component with ES7 module system", 127 | fileTypes: ["jsx", "tsx"], 128 | }, 129 | { 130 | prefix: "rmcp", 131 | snippet: 132 | "import React, { memo } from 'react'\nimport PropTypes from 'prop-types'\n\nconst ${FILE_NAME} = memo((props) => {\n return (\n
$1
\n )\n})\n\n${FILE_NAME}.propTypes = {}\n\nexport default ${FILE_NAME}", 133 | type: "Components", 134 | description: 135 | "Creates a React Memo Function component with PropTypes and ES7 module system", 136 | fileTypes: ["jsx", "tsx"], 137 | }, 138 | { 139 | prefix: "rccp", 140 | snippet: 141 | "import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\n\nexport default class ${FILE_NAME} extends Component {\n static propTypes = {${1:first}\n }\n render() {\n return (\n
$2
\n )\n }\n}", 142 | type: "Components", 143 | description: 144 | "Creates a React component class with PropTypes and ES7 module system", 145 | fileTypes: ["jsx", "tsx"], 146 | }, 147 | { 148 | prefix: "rcredux", 149 | snippet: 150 | "import React, { Component } from 'react'\nimport { connect } from 'react-redux'\n\nexport class ${FILE_NAME} extends Component {\n render() {\n return (\n
$1
\n )\n }\n}\n\nconst mapStateToProps = (state) => ({})\n\nconst mapDispatchToProps = {}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(${FILE_NAME})", 151 | type: "Components", 152 | description: 153 | "Creates a React component class with connected redux and ES7 module system", 154 | fileTypes: ["jsx", "tsx"], 155 | }, 156 | { 157 | prefix: "rcreduxp", 158 | snippet: 159 | "import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\n\nexport class ${FILE_NAME} extends Component {\n static propTypes = {${1:first}\n }\n render() {\n return (\n
$2
\n )\n }\n}\n\nconst mapStateToProps = (state) => ({})\n\nconst mapDispatchToProps = {}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(${FILE_NAME})", 160 | type: "Components", 161 | description: 162 | "Creates a React component class with PropTypes, connected redux and ES7 module system", 163 | fileTypes: ["jsx", "tsx"], 164 | }, 165 | { 166 | prefix: "rfcredux", 167 | snippet: 168 | "import React from 'react'\nimport { connect } from 'react-redux'\n\nconst ${FILE_NAME} = (props) => {\n return (\n
$1
\n )\n}\n\nconst mapStateToProps = (state) => ({})\n\nconst mapDispatchToProps = {}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(${FILE_NAME})", 169 | type: "Components", 170 | description: 171 | "Creates a React functional component with connected redux and ES7 module system", 172 | fileTypes: ["jsx", "tsx"], 173 | }, 174 | { 175 | prefix: "rfcreduxp", 176 | snippet: 177 | "import React from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\n\nconst ${FILE_NAME} = (props) => {\n return (\n
$1
\n )\n}\n\nconst mapStateToProps = (state) => ({})\n\nconst mapDispatchToProps = {}\n\n${FILE_NAME}.propTypes = {${2:second}\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(${FILE_NAME})", 178 | type: "Components", 179 | description: 180 | "DEPRECATED: Creates a React functional component with PropTypes, connected redux and ES7 module system", 181 | fileTypes: ["jsx", "tsx"], 182 | }, 183 | // hooks snippets 184 | { 185 | prefix: "useEffectSnippet", 186 | snippet: 187 | "useEffect(() => {\n ${1:first}\n return () => {\n ${2:second}\n }\n}, [${3:third}])\n", 188 | type: "Hooks", 189 | fileTypes: ["jsx", "tsx"], 190 | }, 191 | { 192 | prefix: "useContextSnippet", 193 | snippet: "const ${1:first} = useContext(${2:second})", 194 | type: "Hooks", 195 | fileTypes: ["jsx", "tsx"], 196 | }, 197 | { 198 | prefix: "useStateSnippet", 199 | snippet: "const [${1:first}, set${1:first}] = useState(${2:second})", 200 | type: "Hooks", 201 | fileTypes: ["jsx", "tsx"], 202 | }, 203 | { 204 | prefix: "useReducerSnippet", 205 | snippet: 206 | "const [state, dispatch] = useReducer(${1:first}, ${2:second}, ${3:third})", 207 | type: "Hooks", 208 | fileTypes: ["jsx", "tsx"], 209 | }, 210 | { 211 | prefix: "useCallbackSnippet", 212 | snippet: 213 | "useCallback(\n () => {\n ${1:first}\n },\n [${2:second}],\n)\n", 214 | type: "Hooks", 215 | fileTypes: ["jsx", "tsx"], 216 | }, 217 | { 218 | prefix: "useMemoSnippet", 219 | snippet: "useMemo(() => ${1:first}, [${2:second}])", 220 | type: "Hooks", 221 | fileTypes: ["jsx", "tsx"], 222 | }, 223 | { 224 | prefix: "useRefSnippet", 225 | snippet: "const ${1:first} = useRef(${2:second})", 226 | type: "Hooks", 227 | fileTypes: ["jsx", "tsx"], 228 | }, 229 | { 230 | prefix: "useImperativeHandleSnippet", 231 | snippet: 232 | "useImperativeHandle(\n ${1:first},\n () => {\n ${2:second}\n },\n [${3:third}],\n)\n", 233 | type: "Hooks", 234 | fileTypes: ["jsx", "tsx"], 235 | }, 236 | { 237 | prefix: "useLayoutEffectSnippet", 238 | snippet: 239 | "useLayoutEffect(() => {\n ${1:first}\n\n return () => {\n ${2:second}\n };\n}, [${3:third}])\n", 240 | type: "Hooks", 241 | fileTypes: ["jsx", "tsx"], 242 | }, 243 | // imports snippet 244 | { 245 | prefix: "imr", 246 | snippet: "import React from 'react'", 247 | type: "ImportReact", 248 | fileTypes: ["jsx", "tsx"], 249 | }, 250 | { 251 | prefix: "imrd", 252 | snippet: "import ReactDOM from 'react-dom'", 253 | type: "ImportReactDom", 254 | fileTypes: ["jsx", "tsx"], 255 | }, 256 | { 257 | prefix: "imrc", 258 | snippet: "import React, { Component } from 'react'", 259 | type: "ImportReactWithComponent", 260 | fileTypes: ["jsx", "tsx"], 261 | }, 262 | { 263 | prefix: "imrcp", 264 | snippet: 265 | "import React, { Component } from 'react'\nimport PropTypes from 'prop-types'", 266 | type: "ImportReactWithComponentAndPropTypes", 267 | fileTypes: ["jsx", "tsx"], 268 | }, 269 | { 270 | prefix: "imrpc", 271 | snippet: "import React, { PureComponent } from 'react'", 272 | type: "ImportReactWithPureComponent", 273 | fileTypes: ["jsx", "tsx"], 274 | }, 275 | { 276 | prefix: "imrpcp", 277 | snippet: 278 | "import React, { PureComponent } from 'react'\nimport PropTypes from 'prop-types'", 279 | type: "ImportReactWithPureComponent&PropTypes", 280 | fileTypes: ["jsx", "tsx"], 281 | }, 282 | { 283 | prefix: "imrm", 284 | snippet: "import React, { memo } from 'react'", 285 | type: "ImportReactWithMemo", 286 | fileTypes: ["jsx", "tsx"], 287 | }, 288 | { 289 | prefix: "imrmp", 290 | snippet: 291 | "import React, { memo } from 'react'\nimport PropTypes from 'prop-types'", 292 | type: "ImportReactWithMemo&PropTypes", 293 | fileTypes: ["jsx", "tsx"], 294 | }, 295 | { 296 | prefix: "impt", 297 | snippet: "import PropTypes from 'prop-types'", 298 | type: "ImportPropTypes", 299 | fileTypes: ["jsx", "tsx"], 300 | }, 301 | // react-router 302 | { 303 | prefix: "imbr", 304 | snippet: "import { BrowserRouter as Router } from 'react-router-dom'", 305 | type: "ReactRouter", 306 | fileTypes: ["jsx", "tsx"], 307 | }, 308 | { 309 | prefix: "imrr", 310 | snippet: 311 | "import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'", 312 | type: "ReactRouterWithRouteAndNavLink", 313 | fileTypes: ["jsx", "tsx"], 314 | }, 315 | { 316 | prefix: "imbrc", 317 | snippet: "import { Route, Switch, NavLink, Link } from 'react-router-dom'", 318 | type: "ImportRouterSetup", 319 | fileTypes: ["jsx", "tsx"], 320 | }, 321 | { 322 | prefix: "imbrs", 323 | snippet: "import { Switch } from 'react-router-dom'", 324 | type: "ImportRouterSwitch", 325 | fileTypes: ["jsx", "tsx"], 326 | }, 327 | { 328 | prefix: "imbrl", 329 | snippet: "import { Link } from 'react-router-dom'", 330 | type: "ImportRouterLink", 331 | fileTypes: ["jsx", "tsx"], 332 | }, 333 | { 334 | prefix: "imbrnl", 335 | snippet: "import { NavLink } from 'react-router-dom'", 336 | type: "ImportRouterNavLink", 337 | fileTypes: ["jsx", "tsx"], 338 | }, 339 | // other imports 340 | { 341 | prefix: "imp", 342 | snippet: "import ${2:Name} from '${1:first}'", 343 | type: "Import", 344 | fileTypes: ["jsx", "tsx"], 345 | }, 346 | { 347 | prefix: "imn", 348 | snippet: "import '${1:first}'", 349 | type: "ImportNoModuleName", 350 | fileTypes: ["jsx", "tsx"], 351 | }, 352 | { 353 | prefix: "imd", 354 | snippet: "import { ${2:Component} } from '${1:first}'", 355 | type: "ImportDestructing", 356 | fileTypes: ["jsx", "tsx"], 357 | }, 358 | { 359 | prefix: "ime", 360 | snippet: "import * as ${2:comp} from '${1:first}'", 361 | type: "ImportEverything", 362 | fileTypes: ["jsx", "tsx"], 363 | }, 364 | { 365 | prefix: "ima", 366 | snippet: "import { ${2:Component} as ${3:third} } from '${1:first}'", 367 | type: "ImportAs", 368 | fileTypes: ["jsx", "tsx"], 369 | }, 370 | { 371 | prefix: "req", 372 | snippet: "const ${1:packageName} = require('${1:package}')", 373 | type: "RequireToConst", 374 | description: "Require a package to const", 375 | fileTypes: ["tsx", "javascript"], 376 | }, 377 | // basics 378 | { 379 | prefix: "exp", 380 | snippet: "export default ${1:first}", 381 | type: "ExportDefault", 382 | fileTypes: ["jsx", "tsx"], 383 | }, 384 | { 385 | prefix: "exd", 386 | snippet: "export { ${2:second} } from '${1:first}'", 387 | type: "ExportDestructing", 388 | fileTypes: ["jsx", "tsx"], 389 | }, 390 | { 391 | prefix: "exa", 392 | snippet: "export { ${2:second} as ${3:third} } from '${1:first}'", 393 | type: "ExportAs", 394 | fileTypes: ["jsx", "tsx"], 395 | }, 396 | { 397 | prefix: "enf", 398 | snippet: "export const ${1:first} = (${2:second}) => {${3:third}}", 399 | type: "ExportNamedFunction", 400 | description: "Export named function", 401 | fileTypes: ["jsx", "tsx", "javascript"], 402 | }, 403 | { 404 | prefix: "edf", 405 | snippet: "export default (${1:first}) => {${2:second}}", 406 | type: "ExportDefaultFunction", 407 | description: "Export default function", 408 | fileTypes: ["jsx", "tsx"], 409 | }, 410 | { 411 | prefix: "ednf", 412 | snippet: "export default function ${1:first}(${2:second}) {${3:third}}", 413 | type: "ExportDefaultNamedFunction", 414 | description: "Export default named function", 415 | fileTypes: ["jsx", "tsx", "javascript"], 416 | }, 417 | { 418 | prefix: "met", 419 | snippet: "${1:first} = (${2:second}) => {${3:third}}", 420 | type: "Method", 421 | description: "Creates a method inside a class", 422 | fileTypes: ["jsx", "tsx", "javascript"], 423 | }, 424 | { 425 | prefix: "pge", 426 | snippet: "get ${1:first}() {\n return this.${2:second}\n}", 427 | type: "PropertyGet", 428 | description: "Creates a getter property inside a class", 429 | fileTypes: ["jsx", "tsx", "javascript"], 430 | }, 431 | { 432 | prefix: "pse", 433 | snippet: "set ${1:first}(${2:second}) {${3:third}}", 434 | type: "PropertySet", 435 | description: "Creates a setter property inside a class", 436 | fileTypes: ["jsx", "tsx", "javascript"], 437 | }, 438 | { 439 | prefix: "fre", 440 | snippet: "${1:first}.forEach(${2:second} => {${3:third}})", 441 | type: "ForEach", 442 | description: "Creates a forEach statement", 443 | fileTypes: ["jsx", "tsx", "javascript"], 444 | }, 445 | { 446 | prefix: "fof", 447 | snippet: "for(let ${1:first} of ${2:second}) {${3:third}}", 448 | type: "ForOf", 449 | description: "Iterating over property names of iterable objects", 450 | fileTypes: ["jsx", "tsx", "javascript"], 451 | }, 452 | { 453 | prefix: "fin", 454 | snippet: "for(let ${1:first} in ${2:second}) {${3:third}}", 455 | type: "ForIn", 456 | description: "Iterating over property values of iterable objects", 457 | fileTypes: ["jsx", "tsx", "javascript"], 458 | }, 459 | { 460 | prefix: "anfn", 461 | snippet: "(${1:first}) => { ${2:second} }", 462 | type: "AnonymousFunction", 463 | description: "Creates an anonymous function", 464 | fileTypes: ["jsx", "tsx", "javascript"], 465 | }, 466 | { 467 | prefix: "nfn", 468 | snippet: "const ${1:first} = (${2:second}) => { ${3:third} }", 469 | type: "NamedFunction", 470 | description: "Creates a named function", 471 | fileTypes: ["jsx", "tsx", "javascript"], 472 | }, 473 | { 474 | prefix: "dob", 475 | snippet: "const {${2:second}} = ${1:first}", 476 | type: "DestructingObject", 477 | description: 478 | "Creates and assigns a local variable using object destructing", 479 | fileTypes: ["jsx", "tsx", "javascript"], 480 | }, 481 | { 482 | prefix: "dar", 483 | snippet: "const [${2:second}] = ${1:first}", 484 | type: "DestructingArray", 485 | description: "Creates and assigns a local variable using array destructing", 486 | fileTypes: ["jsx", "tsx", "javascript"], 487 | }, 488 | { 489 | prefix: "sti", 490 | snippet: "setInterval(() => { ${1:first} }, ${2:second})", 491 | type: "SetInterval", 492 | description: "Executes the given function at specified intervals", 493 | fileTypes: ["jsx", "tsx", "javascript"], 494 | }, 495 | { 496 | prefix: "sto", 497 | snippet: "setTimeout(() => { ${1:first} }, ${2:second})", 498 | type: "SetTimeOut", 499 | description: "Executes the given function after the specified delay", 500 | fileTypes: ["jsx", "tsx", "javascript"], 501 | }, 502 | { 503 | prefix: "prom", 504 | snippet: "return new Promise((resolve, reject) => { ${1:first} })", 505 | type: "Promise", 506 | description: "Creates and returns a new Promise in the standard ES7 syntax", 507 | fileTypes: ["jsx", "tsx", "javascript"], 508 | }, 509 | { 510 | prefix: "cp", 511 | snippet: "const { ${1:first} } = this.props", 512 | type: "DestructProps", 513 | description: "Creates and assigns a local variable using props destructing", 514 | fileTypes: ["jsx", "tsx"], 515 | }, 516 | { 517 | prefix: "cs", 518 | snippet: "const { ${1:first} } = this.state", 519 | type: "DestructState", 520 | description: "Creates and assigns a local variable using state destructing", 521 | fileTypes: ["jsx", "tsx"], 522 | }, 523 | { 524 | prefix: "rconst", 525 | snippet: 526 | "constructor(props) {\n super(props)\n this.state = {\n ${1:first}\n }\n}", 527 | type: "ClassConstructor", 528 | description: 529 | "Adds a default constructor for it('', () => {})the class that contains props as arguments", 530 | fileTypes: ["jsx", "tsx"], 531 | }, 532 | { 533 | prefix: "est", 534 | snippet: "state = { ${1:first} }", 535 | type: "EmptyState", 536 | description: "Creates empty state object. To be used in a constructor.", 537 | fileTypes: ["jsx", "tsx"], 538 | }, 539 | { 540 | prefix: "cdm", 541 | snippet: "componentDidMount() { ${1:first} }", 542 | type: "ComponentDidMount", 543 | description: 544 | "Invoked once, only on the client (not on the server), immediately after the initial rendering occurs.", 545 | fileTypes: ["jsx", "tsx"], 546 | }, 547 | { 548 | prefix: "scu", 549 | snippet: "shouldComponentUpdate(nextProps, nextState) { ${1:first} }", 550 | type: "ShouldComponentUpdate", 551 | description: 552 | "Invoked before rendering when new props or state are being received. ", 553 | fileTypes: ["jsx", "tsx"], 554 | }, 555 | { 556 | prefix: "cdup", 557 | snippet: "componentDidUpdate(prevProps, prevState) { ${1:first}}", 558 | type: "ComponentDidUpdate", 559 | description: 560 | "Invoked immediately after the component's updates are flushed to the DOM.", 561 | fileTypes: ["jsx", "tsx"], 562 | }, 563 | { 564 | prefix: "cwun", 565 | snippet: "componentWillUnmount() {${1:first} }", 566 | type: "ComponentWillUnmount", 567 | description: 568 | "Invoked immediately before a component is unmounted from the DOM.", 569 | fileTypes: ["jsx", "tsx"], 570 | }, 571 | { 572 | prefix: "gdsfp", 573 | snippet: "static getDerivedStateFromProps(props, state) {${1:first}}", 574 | type: "GetDerivedStateFromProps", 575 | description: 576 | "Invoked right before calling the render method, both on the initial mount and on subsequent updates.", 577 | fileTypes: ["jsx", "tsx"], 578 | }, 579 | { 580 | prefix: "gsbu", 581 | snippet: "getSnapshotBeforeUpdate = (prevProps, prevState) => {${1:first}}", 582 | type: "GetSnapshotBeforeUpdate", 583 | description: 584 | "Called right before mutations are made (e.g. before the DOM is updated)", 585 | fileTypes: ["jsx", "tsx"], 586 | }, 587 | { 588 | prefix: "rcontext", 589 | snippet: "const ${1:first} = React.createContext()", 590 | type: "CreateContext", 591 | description: "Create React context", 592 | fileTypes: ["jsx", "tsx"], 593 | }, 594 | { 595 | prefix: "cref", 596 | snippet: "this.${1:first}Ref = React.createRef()", 597 | type: "CreateRef", 598 | description: "Create ref statement used inside constructor", 599 | fileTypes: ["jsx", "tsx"], 600 | }, 601 | { 602 | prefix: "sst", 603 | snippet: "this.setState((state, props) => { return { ${1:first} }})", 604 | type: "ComponentSetStateObject", 605 | description: "Performs a shallow merge of nextState into current state", 606 | fileTypes: ["jsx", "tsx"], 607 | }, 608 | { 609 | prefix: "ssf", 610 | snippet: "this.setState((state, props) => { return { ${1:first} }})", 611 | type: "ComponentSetStateFunc", 612 | description: "Performs a shallow merge of nextState into current state", 613 | fileTypes: ["jsx", "tsx"], 614 | }, 615 | { 616 | prefix: "props", 617 | snippet: "this.props.${1:first}", 618 | type: "ComponentProps", 619 | description: "Access component's props", 620 | fileTypes: ["jsx", "tsx"], 621 | }, 622 | { 623 | prefix: "state", 624 | snippet: "this.state.${1:first}", 625 | type: "ComponentState", 626 | fileTypes: ["jsx", "tsx"], 627 | }, 628 | { 629 | prefix: "bnd", 630 | snippet: "this.${1:first} = this.${1:first}.bind(this)", 631 | type: "BindThis", 632 | description: "Binds this to a method", 633 | fileTypes: ["jsx", "tsx"], 634 | }, 635 | { 636 | prefix: "cmmb", 637 | snippet: "/**\n * ${1:first}\n */", 638 | type: "CommentBigBlock", 639 | fileTypes: ["jsx", "tsx"], 640 | }, 641 | { 642 | prefix: "hocredux", 643 | snippet: 644 | "import React from 'react'\nimport { connect } from 'react-redux'\nimport PropTypes from 'prop-types'\n\nexport const mapStateToProps = state => ({})\n\nexport const mapDispatchToProps = {}\n\nexport const ${1:first} = (WrappedComponent) => {\n const hocComponent = ({ ...props }) => \n\n hocComponent.propTypes = {}\n\n return hocComponent\n}\n\nexport default WrapperComponent => connect(mapStateToProps, mapDispatchToProps)(${1:first}(WrapperComponent))\n", 645 | type: "HocComponentWithRedux", 646 | fileTypes: ["jsx", "tsx"], 647 | }, 648 | { 649 | prefix: "hoc", 650 | snippet: 651 | "import React from 'react'\nimport PropTypes from 'prop-types'\n\nexport default (WrappedComponent) => {\n const hocComponent = ({ ...props }) => \n\n hocComponent.propTypes = {}\n\n return hocComponent\n}\n", 652 | type: "HocComponent", 653 | fileTypes: ["jsx", "tsx"], 654 | }, 655 | { 656 | prefix: "tpf", 657 | snippet: "typeof ${1:first}", 658 | type: "TypeofSnippet", 659 | fileTypes: ["jsx", "tsx", "javascript"], 660 | }, 661 | { 662 | prefix: "call", 663 | snippet: "${1:method}.call(${2:context}, ${3:arguments})", 664 | type: "method", 665 | description: 666 | "Calls the function with the specified object as the this value and the specified rest arguments as the arguments.", 667 | fileTypes: ["jsx", "tsx", "javascript"], 668 | }, 669 | { 670 | prefix: "apply", 671 | snippet: "${1:method}.apply(${2:context}, ${3:arguments})", 672 | type: "method", 673 | description: 674 | "Calls the function with the specified object as the this value and the elements of specified array as the arguments.", 675 | fileTypes: ["jsx", "tsx", "javascript"], 676 | }, 677 | { 678 | prefix: "jp", 679 | snippet: "JSON.parse(${1:obj})", 680 | type: "JSON", 681 | description: 682 | "Converts a JavaScript Object Notation (JSON) string into an object", 683 | fileTypes: ["jsx", "tsx", "javascript"], 684 | }, 685 | { 686 | prefix: "js", 687 | snippet: "JSON.stringify(${1:obj})", 688 | type: "JSON", 689 | description: 690 | "Converts a JavaScript value to a JavaScript Object Notation (JSON) string.", 691 | fileTypes: ["jsx", "tsx", "javascript"], 692 | }, 693 | { 694 | prefix: "us", 695 | snippet: "'use strict'", 696 | type: "use strict", 697 | description: "Use Javascript strict mode", 698 | fileTypes: ["tsx", "javascript"], 699 | }, 700 | { 701 | prefix: "al", 702 | snippet: "alert('${1:message}')", 703 | type: "alert", 704 | fileTypes: ["jsx", "tsx", "javascript"], 705 | }, 706 | { 707 | prefix: "pr", 708 | snippet: "prompt('${1:message}')", 709 | type: "prompt", 710 | fileTypes: ["jsx", "tsx", "javascript"], 711 | }, 712 | { 713 | prefix: "cf", 714 | snippet: "confirm('${1:msg}');", 715 | type: "confirm", 716 | fileTypes: ["jsx", "tsx", "javascript"], 717 | }, 718 | // js console snippets 719 | { 720 | prefix: "cas", 721 | snippet: "console.assert(${1:first}, ${2:second})", 722 | type: "ConsoleAssert", 723 | description: 724 | "If the specified expression is false, the message is written to the console along with a stack trace", 725 | fileTypes: ["jsx", "tsx", "javascript"], 726 | }, 727 | { 728 | prefix: "ccl", 729 | snippet: "console.clear()", 730 | type: "ConsoleClear", 731 | description: "Clears the console", 732 | fileTypes: ["jsx", "tsx", "javascript"], 733 | }, 734 | { 735 | prefix: "cco", 736 | snippet: "console.count(${1:first})", 737 | type: "ConsoleCount", 738 | description: 739 | "Writes the the number of times that count() has been invoked at the same line and with the same label", 740 | fileTypes: ["jsx", "tsx", "javascript"], 741 | }, 742 | { 743 | prefix: "cdi", 744 | snippet: "console.dir(${1:first})", 745 | type: "ConsoleDir", 746 | description: "Prints a JavaScript representation of the specified object", 747 | fileTypes: ["jsx", "tsx", "javascript"], 748 | }, 749 | { 750 | prefix: "cer", 751 | snippet: "console.error(${1:first})", 752 | type: "ConsoleError", 753 | description: 754 | "Displays a message in the console and also includes a stack trace from where the method was called", 755 | fileTypes: ["jsx", "tsx", "javascript"], 756 | }, 757 | { 758 | prefix: "cgr", 759 | snippet: "console.group('${1:first}')", 760 | type: "ConsoleGroup", 761 | description: 762 | "Groups and indents all following output by an additional level, until console.groupEnd() is called.", 763 | fileTypes: ["jsx", "tsx", "javascript"], 764 | }, 765 | { 766 | prefix: "cge", 767 | snippet: "console.groupEnd()", 768 | type: "ConsoleGroupEnd", 769 | description: "Closes out the corresponding console.group().", 770 | fileTypes: ["jsx", "tsx", "javascript"], 771 | }, 772 | { 773 | prefix: "clg", 774 | snippet: "console.log(${1:first})", 775 | type: "ConsoleLog", 776 | description: "Displays a message in the console", 777 | fileTypes: ["jsx", "tsx", "javascript"], 778 | }, 779 | { 780 | prefix: "ctr", 781 | snippet: "console.trace(${1:first})", 782 | type: "ConsoleTrace", 783 | description: 784 | "Prints a stack trace from the point where the method was called", 785 | fileTypes: ["jsx", "tsx", "javascript"], 786 | }, 787 | { 788 | prefix: "clo", 789 | snippet: "console.log('${1:first}', ${2:second})", 790 | type: "ConsoleLogObject", 791 | description: "Logs property with name.", 792 | fileTypes: ["jsx", "tsx", "javascript"], 793 | }, 794 | { 795 | prefix: "clj", 796 | snippet: "console.log('${1:first}', JSON.stringify(${1:first}, null, 2))", 797 | type: "ConsoleLogJson", 798 | description: "Logs stringified JSON property with name.", 799 | fileTypes: ["jsx", "tsx", "javascript"], 800 | }, 801 | { 802 | prefix: "ctm", 803 | snippet: "console.time('${1:first}')", 804 | type: "ConsoleTime", 805 | description: "Console time wrapper", 806 | fileTypes: ["jsx", "tsx", "javascript"], 807 | }, 808 | { 809 | prefix: "cte", 810 | snippet: "console.timeEnd('${1:first}')", 811 | type: "ConsoleTimeEnd", 812 | description: "Console time end wrapper", 813 | fileTypes: ["jsx", "tsx", "javascript"], 814 | }, 815 | { 816 | prefix: "cwa", 817 | snippet: "console.warn(${1:first})", 818 | type: "ConsoleWarn", 819 | description: 820 | "Displays a message in the console but also displays a yellow warning icon along with the logged message", 821 | fileTypes: ["jsx", "tsx", "javascript"], 822 | }, 823 | { 824 | prefix: "cin", 825 | snippet: "console.info(${1:first})", 826 | type: "ConsoleInfo", 827 | description: 828 | "Displays a message in the console but also displays a blue information icon along with the logged message", 829 | fileTypes: ["jsx", "tsx", "javascript"], 830 | }, 831 | { 832 | prefix: "ctl", 833 | snippet: "console.table([${1:first}])", 834 | type: "ConsoleTable", 835 | description: "Logs table to console", 836 | fileTypes: ["jsx", "tsx", "javascript"], 837 | }, 838 | // prop types 839 | { 840 | prefix: "pta", 841 | snippet: "PropTypes.array", 842 | type: "PropTypeArray", 843 | description: "Array prop type", 844 | fileTypes: ["jsx", "tsx"], 845 | }, 846 | { 847 | prefix: "ptar", 848 | snippet: "PropTypes.array.isRequired", 849 | type: "PropTypeArrayRequired", 850 | description: "Array prop type required", 851 | fileTypes: ["jsx", "tsx"], 852 | }, 853 | { 854 | prefix: "ptb", 855 | snippet: "PropTypes.bool", 856 | type: "PropTypeBool", 857 | description: "Bool prop type", 858 | fileTypes: ["jsx", "tsx"], 859 | }, 860 | { 861 | prefix: "ptbr", 862 | snippet: "PropTypes.bool.isRequired", 863 | type: "PropTypeBoolRequired", 864 | description: "Bool prop type required", 865 | fileTypes: ["jsx", "tsx"], 866 | }, 867 | { 868 | prefix: "ptf", 869 | snippet: "PropTypes.func", 870 | type: "PropTypeFunc", 871 | description: "Func prop type", 872 | fileTypes: ["jsx", "tsx"], 873 | }, 874 | { 875 | prefix: "ptfr", 876 | snippet: "PropTypes.func.isRequired", 877 | type: "PropTypeFuncRequired", 878 | description: "Func prop type required", 879 | fileTypes: ["jsx", "tsx"], 880 | }, 881 | { 882 | prefix: "ptn", 883 | snippet: "PropTypes.number", 884 | type: "PropTypeNumber", 885 | description: "Number prop type", 886 | fileTypes: ["jsx", "tsx"], 887 | }, 888 | { 889 | prefix: "ptnr", 890 | snippet: "PropTypes.number.isRequired", 891 | type: "PropTypeNumberRequired", 892 | description: "Number prop type required", 893 | fileTypes: ["jsx", "tsx"], 894 | }, 895 | { 896 | prefix: "pto", 897 | snippet: "PropTypes.object", 898 | type: "PropTypeObject", 899 | description: "Object prop type", 900 | fileTypes: ["jsx", "tsx"], 901 | }, 902 | { 903 | prefix: "ptor", 904 | snippet: "PropTypes.object.isRequired", 905 | type: "PropTypeObjectRequired", 906 | description: "Object prop type required", 907 | fileTypes: ["jsx", "tsx"], 908 | }, 909 | { 910 | prefix: "pts", 911 | snippet: "PropTypes.string", 912 | type: "PropTypeString", 913 | description: "String prop type", 914 | fileTypes: ["jsx", "tsx"], 915 | }, 916 | { 917 | prefix: "ptsr", 918 | snippet: "PropTypes.string.isRequired", 919 | type: "PropTypeStringRequired", 920 | description: "String prop type required", 921 | fileTypes: ["jsx", "tsx"], 922 | }, 923 | { 924 | prefix: "ptnd", 925 | snippet: "PropTypes.node", 926 | type: "PropTypeNode", 927 | description: 928 | "Anything that can be rendered: numbers, strings, elements or an array", 929 | fileTypes: ["jsx", "tsx"], 930 | }, 931 | { 932 | prefix: "ptndr", 933 | snippet: "PropTypes.node.isRequired", 934 | type: "PropTypeNodeRequired", 935 | description: 936 | "Anything that can be rendered: numbers, strings, elements or an array required", 937 | fileTypes: ["jsx", "tsx"], 938 | }, 939 | { 940 | prefix: "ptel", 941 | snippet: "PropTypes.element", 942 | type: "PropTypeElement", 943 | description: "React element prop type", 944 | fileTypes: ["jsx", "tsx"], 945 | }, 946 | { 947 | prefix: "ptelr", 948 | snippet: "PropTypes.element.isRequired", 949 | type: "PropTypeElementRequired", 950 | description: "React element prop type required", 951 | fileTypes: ["jsx", "tsx"], 952 | }, 953 | { 954 | prefix: "pti", 955 | snippet: "PropTypes.instanceOf(${1:ClassName})", 956 | type: "PropTypeInstanceOf", 957 | description: "Is an instance of a class prop type", 958 | fileTypes: ["jsx", "tsx"], 959 | }, 960 | { 961 | prefix: "ptir", 962 | snippet: "PropTypes.instanceOf(${1:ClassName}).isRequired", 963 | type: "PropTypeInstanceOfRequired", 964 | description: "Is an instance of a class prop type required", 965 | fileTypes: ["jsx", "tsx"], 966 | }, 967 | { 968 | prefix: "pte", 969 | snippet: "PropTypes.oneOf(['${1:value1}', '${2:value2}'])", 970 | type: "PropTypeEnum", 971 | description: 972 | "Prop type limited to specific values by treating it as an enum", 973 | fileTypes: ["jsx", "tsx"], 974 | }, 975 | { 976 | prefix: "pter", 977 | snippet: "PropTypes.oneOf(['${1:value1}', '${2:value2}']).isRequired", 978 | type: "PropTypeEnumRequired", 979 | description: 980 | "Prop type limited to specific values by treating it as an enum required", 981 | fileTypes: ["jsx", "tsx"], 982 | }, 983 | { 984 | prefix: "ptet", 985 | snippet: 986 | "PropTypes.oneOfType([\n ${1:PropTypes.string},\n ${2:PropTypes.number},\n ${3:PropTypes.bool}\n])", 987 | type: "PropTypeOneOfType", 988 | description: "An object that could be one of many types", 989 | fileTypes: ["jsx", "tsx"], 990 | }, 991 | { 992 | prefix: "ptetr", 993 | snippet: 994 | "PropTypes.oneOfType([\n ${1:PropTypes.string},\n ${2:PropTypes.number},\n ${3:PropTypes.bool}\n]).isRequired", 995 | type: "PropTypeOneOfTypeRequired", 996 | description: "An object that could be one of many types required", 997 | fileTypes: ["jsx", "tsx"], 998 | }, 999 | { 1000 | prefix: "ptao", 1001 | snippet: "PropTypes.arrayOf(${1:PropTypes.string})", 1002 | type: "PropTypeArrayOf", 1003 | description: "An array of a certain type", 1004 | fileTypes: ["jsx", "tsx"], 1005 | }, 1006 | { 1007 | prefix: "ptaor", 1008 | snippet: "PropTypes.arrayOf(${1:PropTypes.string}).isRequired", 1009 | type: "PropTypeArrayOfRequired", 1010 | description: "An array of a certain type required", 1011 | fileTypes: ["jsx", "tsx"], 1012 | }, 1013 | { 1014 | prefix: "ptoo", 1015 | snippet: "PropTypes.objectOf(${1:PropTypes.number})", 1016 | type: "PropTypeObjectOf", 1017 | description: "An object with property values of a certain type", 1018 | fileTypes: ["jsx", "tsx"], 1019 | }, 1020 | { 1021 | prefix: "ptoor", 1022 | snippet: "PropTypes.objectOf(${1:PropTypes.number}).isRequired", 1023 | type: "PropTypeObjectOfRequired", 1024 | description: "An object with property values of a certain type required", 1025 | fileTypes: ["jsx", "tsx"], 1026 | }, 1027 | { 1028 | prefix: "ptsh", 1029 | snippet: 1030 | "PropTypes.shape({\n ${1:propertyName}: ${2:PropTypes.string},\n ${3:propertyName2}: ${4:PropTypes.number}\n})", 1031 | type: "PropTypeShape", 1032 | description: "An object taking on a particular shape", 1033 | fileTypes: ["jsx", "tsx"], 1034 | }, 1035 | { 1036 | prefix: "ptshr", 1037 | snippet: 1038 | "PropTypes.shape({\n ${1:propertyName}: ${2:PropTypes.string},\n ${3:propertyName2}: ${4:PropTypes.number}\n}).isRequired", 1039 | type: "PropTypeShapeRequired", 1040 | description: "An object taking on a particular shape required", 1041 | fileTypes: ["jsx", "tsx"], 1042 | }, 1043 | { 1044 | prefix: "ptex", 1045 | snippet: 1046 | "PropTypes.exact({\n ${1:propertyName}: ${2:PropTypes.string},\n ${3:propertyName2}: ${4:PropTypes.number}\n})", 1047 | type: "PropTypeExact", 1048 | description: "An object with warnings on extra properties", 1049 | fileTypes: ["jsx", "tsx"], 1050 | }, 1051 | { 1052 | prefix: "ptexr", 1053 | snippet: 1054 | "PropTypes.exact({\n ${1:propertyName}: ${2:PropTypes.string},\n ${3:propertyName2}: ${4:PropTypes.number}\n}).isRequired", 1055 | type: "PropTypeExactRequired", 1056 | description: "An object with warnings on extra properties required", 1057 | fileTypes: ["jsx", "tsx"], 1058 | }, 1059 | { 1060 | prefix: "ptany", 1061 | snippet: "PropTypes.any", 1062 | type: "PropTypeAny", 1063 | description: "Any prop type", 1064 | fileTypes: ["jsx", "tsx"], 1065 | }, 1066 | { 1067 | prefix: "desc", 1068 | snippet: "describe('${1:first}', () => { ${2:second} })", 1069 | type: "describeBlock", 1070 | description: "Testing `describe` block", 1071 | fileTypes: ["jsx", "tsx"], 1072 | }, 1073 | { 1074 | prefix: "test", 1075 | snippet: "test('should ${1:first}', () => { ${2:second} })", 1076 | type: "TestBlock", 1077 | description: "Testing `test` block", 1078 | fileTypes: ["jsx", "tsx"], 1079 | }, 1080 | { 1081 | prefix: "testa", 1082 | snippet: "test('should ${1:first}', async () => { ${2:second} })", 1083 | type: "TestAsyncBlock", 1084 | description: "Testing `asynchronous test` block", 1085 | fileTypes: ["jsx", "tsx"], 1086 | }, 1087 | { 1088 | prefix: "tit", 1089 | snippet: "it('should ${1:first}', () => { ${2:second} })", 1090 | type: "ItBlock", 1091 | description: "Testing `it` block", 1092 | fileTypes: ["jsx", "tsx"], 1093 | }, 1094 | { 1095 | prefix: "tita", 1096 | snippet: "it('should ${1:first}', async () => { ${2:second} })", 1097 | type: "ItAsyncBlock", 1098 | description: "Testing asynchronous `it` block", 1099 | fileTypes: ["jsx", "tsx"], 1100 | }, 1101 | { 1102 | prefix: "stest", 1103 | snippet: 1104 | "import React from 'react'\nimport renderer from 'react-test-renderer'\n\nimport { ${1:${FILE_NAME}} } from '../${1:${FILE_NAME}}'\n\ndescribe('<${1:${FILE_NAME}} />', () => {\n const defaultProps = {}\n const wrapper = renderer.create(<${1:${FILE_NAME}} {...defaultProps} />)\n\n test('render', () => {\n expect(wrapper).toMatchSnapshot()\n })\n})", 1105 | type: "SetupReactTest", 1106 | fileTypes: ["jsx", "tsx"], 1107 | }, 1108 | { 1109 | prefix: "sntest", 1110 | snippet: 1111 | "import 'react-native'\nimport React from 'react'\nimport renderer from 'react-test-renderer'\n\nimport ${1:${FILE_NAME}} from '../${1:${FILE_NAME}}'\n\ndescribe('<${1:${FILE_NAME}} />', () => {\n const defaultProps = {}\n const wrapper = renderer.create(<${1:${FILE_NAME}} {...defaultProps} />)\n\n test('render', () => {\n expect(wrapper).toMatchSnapshot()\n })\n})", 1112 | type: "SetupReactNativeTest", 1113 | fileTypes: ["jsx", "tsx"], 1114 | }, 1115 | { 1116 | prefix: "srtest", 1117 | snippet: 1118 | "import React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Provider } from 'react-redux'\n\nimport store from '~/store'\nimport { ${1:${FILE_NAME}} } from '../${1:${FILE_NAME}}'\n\ndescribe('<${1:${FILE_NAME}} />', () => {\n const defaultProps = {}\n const wrapper = renderer.create(\n \n <${1:${FILE_NAME}} {...defaultProps} />\n ,\n )\n\n test('render', () => {\n expect(wrapper).toMatchSnapshot()\n })\n})", 1119 | type: "SetupReactComponentTestWithRedux", 1120 | description: "Create test component", 1121 | fileTypes: ["jsx", "tsx"], 1122 | }, 1123 | { 1124 | prefix: "snrtest", 1125 | snippet: 1126 | "import 'react-native'\nimport React from 'react'\nimport renderer from 'react-test-renderer'\nimport { Provider } from 'react-redux'\n\nimport store from '~/store'\nimport ${1:${FILE_NAME}} from '../${1:${FILE_NAME}}'\n\ndescribe('<${1:${FILE_NAME}} />', () => {\n const defaultProps = {}\n const wrapper = renderer.create(\n \n <${1:${FILE_NAME}} {...defaultProps} />\n ,\n )\n\n test('render', () => {\n expect(wrapper).toMatchSnapshot()\n })\n})", 1127 | type: "SetupReactNativeTestWithRedux", 1128 | fileTypes: ["jsx", "tsx"], 1129 | }, 1130 | //Redux snippets 1131 | { 1132 | prefix: "redux", 1133 | snippet: "import { connect } from 'react-redux'", 1134 | description: "Redux: Import connect from react-redux", 1135 | type: "importReduxConnect", 1136 | fileTypes: ["jsx", "tsx"], 1137 | }, 1138 | { 1139 | prefix: "rxaction", 1140 | snippet: 1141 | "export const ${1} = (payload) => ({\n type: ${2},\n payload\n})\n", 1142 | description: "Redux: Create a Redux action", 1143 | type: "reduxAction", 1144 | fileTypes: ["jsx", "tsx"], 1145 | }, 1146 | { 1147 | prefix: "rxconst", 1148 | snippet: "export const ${1} = '${1}'", 1149 | description: "Redux: Create a Redux constant", 1150 | type: "reduxConst", 1151 | fileTypes: ["jsx", "tsx"], 1152 | }, 1153 | { 1154 | prefix: "rxreducer", 1155 | snippet: 1156 | "const initialState = {}\n\nexport default (state = initialState, { type, payload }) => {\n switch (type) {\n case ${1}:\n return { ...state, ...payload }\n default:\n return state\n }\n}\n", 1157 | description: "Redux: Create a Redux reducer", 1158 | type: "reduxReducer", 1159 | fileTypes: ["jsx", "tsx"], 1160 | }, 1161 | { 1162 | prefix: "rxselect", 1163 | snippet: 1164 | "import { createSelector } from 'reselect'\n\nexport const ${1} = state => state.${2}", 1165 | description: "Redux: Create a Redux selector using Reselect", 1166 | type: "reduxSelector", 1167 | fileTypes: ["jsx", "tsx"], 1168 | }, 1169 | { 1170 | prefix: "rxslice", 1171 | snippet: 1172 | "import { createSlice } from '@reduxjs/toolkit'\n\nconst initialState = {}\n\nconst ${FILE_NAME} = createSlice({\n name: ${2},\n initialState,\n reducers: {}\n});\n\nexport const {} = ${Placeholders.FILE_NAME}.actions\n\nexport default ${Placeholders.FILE_NAME}.reducer", 1173 | description: "Redux: Create a Redux slice using @reduxjs/toolkit", 1174 | type: "reduxSlice", 1175 | fileTypes: ["jsx", "tsx"], 1176 | }, 1177 | { 1178 | prefix: "reduxmap", 1179 | snippet: 1180 | "const mapStateToProps = (state) => ({})\n\nconst mapDispatchToProps = {}", 1181 | description: "Redux: Map state and dispatch to props", 1182 | type: "mappingToProps", 1183 | fileTypes: ["jsx", "tsx"], 1184 | }, 1185 | { 1186 | prefix: "exptp", 1187 | snippet: "export type ${1:first} = {${2:second}}", 1188 | type: "ExportType", 1189 | fileTypes: ["jsx", "tsx"], 1190 | }, 1191 | { 1192 | prefix: "expint", 1193 | snippet: "export interface ${1:first} {${2:second}}", 1194 | type: "ExportInterface", 1195 | fileTypes: ["jsx", "tsx"], 1196 | }, 1197 | { 1198 | prefix: "tsrcc", 1199 | snippet: 1200 | "import React, { Component } from 'react'\n\ninterface Props {\n // Define your props here\n}\n\ninterface State {\n // Define your state here\n}\n\nexport default class ${1:${FILE_NAME}} extends Component {\n state = {}\n\n render() {\n return (\n
\n ${2:/* Your JSX code here */}\n
\n )\n }\n}", 1201 | type: "TypescriptReactClassComponent", 1202 | description: 1203 | "Creates a React component class with ES7 module system and TypeScript interfaces", 1204 | fileTypes: ["jsx", "tsx"], 1205 | }, 1206 | { 1207 | prefix: "tsrce", 1208 | snippet: 1209 | "import React, { Component } from 'react'\n\ninterface Props {\n // Define your props here\n}\n\ninterface State {\n // Define your state here\n}\nclass ${1:${FILE_NAME}} extends Component {\n state = {}\n\n render() {\n return (\n
\n ${2:/* Your JSX code here */}\n
\n )\n }\n}\n\nexport default ${1:${FILE_NAME}};", 1210 | type: "typescriptReactClassExportComponent", 1211 | description: 1212 | "Creates a React component class with ES7 module system and TypeScript interfaces", 1213 | fileTypes: ["jsx", "tsx"], 1214 | }, 1215 | { 1216 | prefix: "tsrfce", 1217 | snippet: 1218 | "import React from 'react'\n\ninterface Props {\n // Define your props here\n}\n\nfunction ${1:${FILE_NAME}}({}: Props) {\n return (\n
\n ${2:/* Your JSX code here */}\n
\n )\n}\n\nexport default ${1:${FILE_NAME}};", 1219 | type: "typescriptReactFunctionalExportComponent", 1220 | description: 1221 | "Creates a React Functional Component with ES7 module system and TypeScript interface", 1222 | fileTypes: ["jsx", "tsx"], 1223 | }, 1224 | { 1225 | prefix: "tsrfc", 1226 | snippet: 1227 | "import React from 'react'\n\ninterface Props {\n // Define your props here\n}\n\nexport default function ${1:${FILE_NAME}}({}: Props) {\n return (\n
\n ${2:/* Your JSX code here */}\n
\n )\n}", 1228 | type: "typescriptReactFunctionalComponent", 1229 | description: 1230 | "Creates a React Functional Component with ES7 module system and TypeScript interface", 1231 | fileTypes: ["jsx", "tsx"], 1232 | }, 1233 | { 1234 | prefix: "tsrafce", 1235 | snippet: 1236 | "import React from 'react';\n\ninterface Props {\n // Define your props here\n}\n\nconst ${1:${FILE_NAME}} = (props: Props) => {\n return (\n
\n ${2:first} {/* Your JSX code here */}\n
\n );\n};\n\nexport default ${1:${FILE_NAME}};", 1237 | type: "typescriptReactArrowFunctionExportComponent", 1238 | description: 1239 | "Creates a React Arrow Function Component with ES7 module system and TypeScript interface", 1240 | fileTypes: ["jsx", "tsx"], 1241 | }, 1242 | { 1243 | prefix: "tsrafc", 1244 | snippet: 1245 | "import React from 'react';\n\ninterface Props {\n // Define your props here\n}\n\nconst ${1:${FILE_NAME}} = (props: Props) => {\n return (\n
\n ${2:FirstTab} {/* Your JSX code here */}\n
\n );\n};", 1246 | type: "typescriptReactArrowFunctionComponent", 1247 | description: 1248 | "Creates a React Arrow Function Component with ES7 module system and TypeScript interface", 1249 | fileTypes: ["jsx", "tsx"], 1250 | }, 1251 | { 1252 | prefix: "tsrpc", 1253 | snippet: 1254 | "import React, { PureComponent } from 'react';\n\ninterface Props {\n // Define your props here\n}\n\nexport default class ${1:${FILE_NAME}} extends PureComponent {\n ${2:innerComponentReturn}\n}", 1255 | type: "typescriptReactClassPureComponent", 1256 | description: 1257 | "Creates a React pure component class with ES7 module system and TypeScript interface", 1258 | fileTypes: ["jsx", "tsx"], 1259 | }, 1260 | { 1261 | prefix: "tsrpce", 1262 | snippet: 1263 | "import React, { PureComponent } from 'react';\n\ninterface Props {\n // Define your props here\n}\n\nclass ${1:${FILE_NAME}} extends PureComponent {\n ${2:innerComponentReturn}\n}\nexport default ${1:${FILE_NAME}};", 1264 | type: "typescriptReactClassExportPureComponent", 1265 | description: 1266 | "Creates a React pure component class with ES7 module system and TypeScript interface", 1267 | fileTypes: ["jsx", "tsx"], 1268 | }, 1269 | { 1270 | prefix: "tsrcredux", 1271 | snippet: 1272 | "import { connect } from 'react-redux';\n${1:reactComponent}\n\ninterface Props {\n // Define your props here\n}\n\ninterface State {\n // Define your state here\n}\n\nexport class ${2:${FILE_NAME}} extends Component {\n state = {};\n ${3:innerComponentReturn}\n}\n${4:reduxComponentExport}", 1273 | type: "typescriptReactClassComponentRedux", 1274 | description: 1275 | "Creates a React component class with connected redux and ES7 module system and TypeScript interfaces", 1276 | fileTypes: ["jsx", "tsx"], 1277 | }, 1278 | { 1279 | prefix: "tsrnf", 1280 | snippet: 1281 | "import { View, Text } from 'react-native';\n${1:react}\n\ninterface Props {\n // Define your props here\n}\n\nconst ${2:${FILE_NAME}} = (props: Props) => {\n return (\n \n ${3:FirstTab}\n \n );\n};\n\nexport default ${2:${FILE_NAME}};", 1282 | type: "typescriptReactNativeArrowFunctionComponent", 1283 | description: 1284 | "Creates a React Native Arrow Function Component with ES7 module system in TypeScript", 1285 | fileTypes: ["jsx", "tsx"], 1286 | }, 1287 | { 1288 | prefix: "tsrnfs", 1289 | snippet: 1290 | "import { StyleSheet, Text, View } from 'react-native';\n${1:react}\n\ninterface Props {\n // Define your props here\n}\n\nconst ${2:${FILE_NAME}} = (props: Props) => {\n return (\n \n ${3:FirstTab}\n \n );\n};\n\nexport default ${2:${FILE_NAME}};\n\nconst styles = StyleSheet.create({});", 1291 | type: "typescriptReactNativeArrowFunctionComponentWithStyles", 1292 | description: 1293 | "Creates a React Native Arrow Function Component with ES7 module system, TypeScript interface and StyleSheet", 1294 | fileTypes: ["jsx", "tsx"], 1295 | }, 1296 | // Array methods 1297 | { 1298 | prefix: "fil", 1299 | snippet: "${1:array}.filter((${2:element}) => ${3:condition})", 1300 | type: "Array.filter", 1301 | description: "Creates a new array with elements that pass a test.", 1302 | fileTypes: ["jsx", "tsx", "javascript"], 1303 | }, 1304 | { 1305 | prefix: "fi", 1306 | snippet: "${1:array}.find((${2:element}) => ${3:condition})", 1307 | type: "Array.find", 1308 | description: "Returns the first element that passes a test.", 1309 | fileTypes: ["jsx", "tsx", "javascript"], 1310 | }, 1311 | 1312 | { 1313 | prefix: "join", 1314 | snippet: "${1:array}.join(${2:separator})", 1315 | type: "Array.join", 1316 | description: "Joins all elements of an array into a string.", 1317 | fileTypes: ["jsx", "tsx", "javascript"], 1318 | }, 1319 | { 1320 | prefix: "map", 1321 | snippet: "${1:array}.map((${2:element}, ${3:index}) => ${4:newElements})", 1322 | type: "Array.map", 1323 | description: 1324 | "Creates a new array with the results of calling a function for each element.", 1325 | fileTypes: ["jsx", "tsx", "javascript"], 1326 | }, 1327 | { 1328 | prefix: "pop", 1329 | snippet: "${1:array}.pop(${2:element})", 1330 | type: "Array.pop", 1331 | description: "Removes the last element from an array and returns it.", 1332 | fileTypes: ["jsx", "tsx", "javascript"], 1333 | }, 1334 | { 1335 | prefix: "push", 1336 | snippet: "${1:array}.push(${2:element})", 1337 | type: "Array.push", 1338 | description: "Adds one or more elements to the end of an array.", 1339 | fileTypes: ["jsx", "tsx", "javascript"], 1340 | }, 1341 | { 1342 | prefix: "red", 1343 | snippet: 1344 | "${1:array}.reduce((${2:accumulator}, ${3:currentValue}) => ${4:accumulatorFunction}, ${5:initialValue})", 1345 | type: "Array.reduce", 1346 | description: "Combines all elements of an array into a single value.", 1347 | fileTypes: ["jsx", "tsx", "javascript"], 1348 | }, 1349 | { 1350 | prefix: "rev", 1351 | snippet: "${1:array}.reverse()", 1352 | type: "Array.reverse", 1353 | description: "Reverses the order of the elements in an array.", 1354 | fileTypes: ["jsx", "tsx", "javascript"], 1355 | }, 1356 | { 1357 | prefix: "sh", 1358 | snippet: "${1:array}.shift(${2:element})", 1359 | type: "Array.shift", 1360 | description: "Removes the first element from an array and returns it.", 1361 | fileTypes: ["jsx", "tsx", "javascript"], 1362 | }, 1363 | { 1364 | prefix: "unsh", 1365 | snippet: "${1:array}.unshift(${2:element})", 1366 | type: "Array.unshift", 1367 | description: "Adds the specified element to the beginning of an array.", 1368 | fileTypes: ["jsx", "tsx", "javascript"], 1369 | }, 1370 | { 1371 | prefix: "spl", 1372 | snippet: "${1:array}.splice(${2:start}, ${3:deleteCount}, ${4:elements})", 1373 | type: "Array.splice", 1374 | description: "Removes, replaces and/or adds new elements in an array.", 1375 | fileTypes: ["jsx", "tsx", "javascript"], 1376 | }, 1377 | { 1378 | prefix: "some", 1379 | snippet: "${1:array}.some((${2:el}) => ${3:condition})", 1380 | type: "Array.some", 1381 | description: "Checks if at least one element in the array passes a test.", 1382 | fileTypes: ["jsx", "tsx", "javascript"], 1383 | }, 1384 | { 1385 | prefix: "sort", 1386 | snippet: "${1:array}.sort((${2:a}, ${3:b}) => ${4:comparisonFunction})", 1387 | type: "Array.sort", 1388 | description: "Sorts the elements of an array in a particular order.", 1389 | fileTypes: ["jsx", "tsx", "javascript"], 1390 | }, 1391 | { 1392 | prefix: "tostr", 1393 | snippet: "${1:array}.toString()", 1394 | type: "Array.toString", 1395 | description: "Returns a string representation of the array.", 1396 | fileTypes: ["jsx", "tsx", "javascript"], 1397 | }, 1398 | { 1399 | prefix: "frm", 1400 | snippet: "Array.from(${1:arrayLike})", 1401 | type: "Array.from", 1402 | description: "Creates a new array from an iterable object.", 1403 | fileTypes: ["jsx", "tsx", "javascript"], 1404 | }, 1405 | // String methods 1406 | { 1407 | prefix: "ca", 1408 | snippet: "${1:str}.charAt(${2:index})", 1409 | type: "String.charAt", 1410 | description: "Returns the character at a specific index.", 1411 | fileTypes: ["jsx", "tsx", "javascript"], 1412 | }, 1413 | { 1414 | prefix: "match", 1415 | snippet: "${1:str}.match(${2:regex})", 1416 | type: "String.match", 1417 | description: "Searches a string for a match against a regular expression.", 1418 | fileTypes: ["jsx", "tsx", "javascript"], 1419 | }, 1420 | { 1421 | prefix: "rpt", 1422 | snippet: "${1:str}.repeat(${2:count})", 1423 | type: "String.repeat", 1424 | description: "Repeats a string a specified number of times.", 1425 | fileTypes: ["jsx", "tsx", "javascript"], 1426 | }, 1427 | { 1428 | prefix: "rep", 1429 | snippet: "${1:str}.replace(${2:substring}, ${3:replacement})", 1430 | type: "String.replace", 1431 | description: 1432 | "Searches a string for a match against a regular expression and replaces it with another string.", 1433 | fileTypes: ["jsx", "tsx", "javascript"], 1434 | }, 1435 | { 1436 | prefix: "repa", 1437 | snippet: "${1:str}.replaceAll(${2:substring}, ${3:replacement})", 1438 | type: "String.replaceAll", 1439 | description: 1440 | "Searches a string for a all matches against a regular expression or a substring and replaces them with another string.", 1441 | fileTypes: ["jsx", "tsx", "javascript"], 1442 | }, 1443 | { 1444 | prefix: "sw", 1445 | snippet: "${1:str}.startsWith(${2:substr})", 1446 | type: "String.startsWith", 1447 | description: "Checks if a string starts with a specified substring.", 1448 | fileTypes: ["jsx", "tsx", "javascript"], 1449 | }, 1450 | { 1451 | prefix: "ew", 1452 | snippet: "${1:str}.endsWith(${2:substr})", 1453 | type: "String.endsWith", 1454 | description: "Checks if a string ends with a specified substring.", 1455 | fileTypes: ["jsx", "tsx", "javascript"], 1456 | }, 1457 | { 1458 | prefix: "sstr", 1459 | snippet: "${1:str}.substring(${2:start}, ${3:end})", 1460 | type: "String.substring", 1461 | description: "Extracts a substring from a string.", 1462 | fileTypes: ["jsx", "tsx", "javascript"], 1463 | }, 1464 | { 1465 | prefix: "ss", 1466 | snippet: "${1:str}.substr(${2:start}, ${3:length})", 1467 | type: "String.substr", 1468 | description: "Extracts a substring with a specific length from a string.", 1469 | fileTypes: ["jsx", "tsx", "javascript"], 1470 | }, 1471 | { 1472 | prefix: "tlc", 1473 | snippet: "${1:str}.toLowerCase()", 1474 | type: "String.toLowerCase", 1475 | description: 1476 | "Returns a new string with all characters converted to lowercase.", 1477 | fileTypes: ["jsx", "tsx", "javascript"], 1478 | }, 1479 | { 1480 | prefix: "tuc", 1481 | snippet: "${1:str}.toUpperCase()", 1482 | type: "String.toUpperCase", 1483 | description: 1484 | "Returns a new string with all characters converted to uppercase.", 1485 | fileTypes: ["jsx", "tsx", "javascript"], 1486 | }, 1487 | { 1488 | prefix: "trm", 1489 | snippet: "${1:str}.trim()", 1490 | type: "String.trim", 1491 | description: "Removes leading and trailing whitespace from a string.", 1492 | fileTypes: ["jsx", "tsx", "javascript"], 1493 | }, 1494 | { 1495 | prefix: "sp", 1496 | snippet: "${1:str}.split(${2:delimiter})", 1497 | type: "String.split", 1498 | description: 1499 | "Splits a string into an array of substrings using all occurrences of the delimiter.", 1500 | fileTypes: ["jsx", "tsx", "javascript"], 1501 | }, 1502 | // Array and string methods 1503 | { 1504 | prefix: "inc", 1505 | snippet: "${1:elements}.includes(${2:element}, ${3:start})", 1506 | type: "includes", 1507 | description: "Checks if an array or string includes a specific element", 1508 | fileTypes: ["jsx", "tsx", "javascript"], 1509 | }, 1510 | { 1511 | prefix: "sl", 1512 | snippet: "${1:elements}.slice(${2:start}, ${3:end})", 1513 | type: "slice", 1514 | description: 1515 | "Returns a shallow copy of selected elements in an array or string, as a new array or string.", 1516 | fileTypes: ["jsx", "tsx", "javascript"], 1517 | }, 1518 | { 1519 | prefix: "io", 1520 | snippet: "${1:elements}.indexOf(${2:element})", 1521 | type: "indexOf", 1522 | description: "Returns the first index of a specific element.", 1523 | fileTypes: ["jsx", "tsx", "javascript"], 1524 | }, 1525 | { 1526 | prefix: "cc", 1527 | snippet: "${1:elements}.concat(${2:otherElements})", 1528 | type: "concat", 1529 | description: 1530 | "Combines multiple strings or arrays into a single new string or array.", 1531 | fileTypes: ["jsx", "tsx", "javascript"], 1532 | }, 1533 | { 1534 | prefix: "lio", 1535 | snippet: "${1:str}.lastIndexOf(${2:substr})", 1536 | type: "lastIndexOf", 1537 | description: 1538 | "Returns the last index of a specified value within another array or string.", 1539 | fileTypes: ["jsx", "tsx", "javascript"], 1540 | }, 1541 | // DOM manipulation snippets 1542 | { 1543 | prefix: "ael", 1544 | snippet: "${1:document}.addEventListener('${2:click}', ${3:(e) => {}})", 1545 | type: "addEventListener", 1546 | description: "Adds an event listener to a DOM element", 1547 | fileTypes: ["tsx", "javascript"], 1548 | }, 1549 | { 1550 | prefix: "rel", 1551 | snippet: 1552 | "${1:document}.removeEventListener('${2:click}', ${3:eventListener})", 1553 | type: "removeEventListener", 1554 | description: "Removes an event listener from a DOM element", 1555 | fileTypes: ["tsx", "javascript"], 1556 | }, 1557 | { 1558 | prefix: "ac", 1559 | snippet: "${1:document}.appendChild(${2:elem})", 1560 | type: "appendChild", 1561 | description: "Adds a child node to a specified parent", 1562 | fileTypes: ["tsx", "javascript"], 1563 | }, 1564 | { 1565 | prefix: "rc", 1566 | snippet: "${1:document}.removeChild(${2:elem})", 1567 | type: "removeChild", 1568 | description: "Removes a child node from the DOM", 1569 | fileTypes: ["tsx", "javascript"], 1570 | }, 1571 | { 1572 | prefix: "rpc", 1573 | snippet: "${1:document}.replaceChild(${2:newChild}, ${3:oldChild})", 1574 | type: "replaceChild", 1575 | description: "Replaces a child node from the DOM", 1576 | fileTypes: ["tsx", "javascript"], 1577 | }, 1578 | { 1579 | prefix: "inb", 1580 | snippet: "${1:parentEl}.insertBefore(${2:newEl}, ${3:refEl})", 1581 | type: "insertBefore", 1582 | description: "Inserts a child node into the DOM", 1583 | fileTypes: ["tsx", "javascript"], 1584 | }, 1585 | { 1586 | prefix: "ina", 1587 | snippet: "${1:parentEl}.insertAdjacentHTML(${2:position}, ${3:el})", 1588 | type: "insertAdjacentHTML", 1589 | description: "Inserts a child node into the DOM", 1590 | fileTypes: ["tsx", "javascript"], 1591 | }, 1592 | { 1593 | prefix: "ds", 1594 | snippet: "${1:el}.dataset", 1595 | type: "dataset", 1596 | description: 1597 | "Returns the value of all 'data-' properties on a HTML element", 1598 | fileTypes: ["tsx", "javascript"], 1599 | }, 1600 | { 1601 | prefix: "gcs", 1602 | snippet: "getComputedStyle(${1:el})", 1603 | type: "replaceChild", 1604 | description: "Removes a child node from the DOM", 1605 | fileTypes: ["tsx", "javascript"], 1606 | }, 1607 | { 1608 | prefix: "cel", 1609 | snippet: "${1:document}.createElement(${2:element})", 1610 | type: "createElement", 1611 | description: "Creates a new HTML element with a specified tag name", 1612 | fileTypes: ["tsx", "javascript"], 1613 | }, 1614 | { 1615 | prefix: "cdf", 1616 | snippet: "document.createDocumentFragment()", 1617 | type: "createDocumentFragment", 1618 | description: "Creates a new offscreen node", 1619 | fileTypes: ["tsx", "javascript"], 1620 | }, 1621 | { 1622 | prefix: "cla", 1623 | snippet: "${1:document}.classList.add('${2:class}')", 1624 | type: "classList.add", 1625 | description: "Adds a new CSS class to a HTML element", 1626 | fileTypes: ["tsx", "javascript"], 1627 | }, 1628 | { 1629 | prefix: "clr", 1630 | snippet: "${1:document}.classList.remove('${2:class}')", 1631 | type: "classList.remove", 1632 | description: "Removes an existing CSS class from a HTML element", 1633 | fileTypes: ["tsx", "javascript"], 1634 | }, 1635 | { 1636 | prefix: "clt", 1637 | snippet: "${1:document}.classList.toggle('${2:class}')", 1638 | type: "classList.toggle", 1639 | description: "Adds or removes a class based on wether it's already present", 1640 | fileTypes: ["tsx", "javascript"], 1641 | }, 1642 | { 1643 | prefix: "gei", 1644 | snippet: "${1:document}.getElementById('${2:id}')", 1645 | type: "getElementById", 1646 | description: 1647 | "Returns an element whose id property matches the specified string", 1648 | fileTypes: ["tsx", "javascript"], 1649 | }, 1650 | { 1651 | prefix: "gecn", 1652 | snippet: "${1:document}.getElementsByClassName('${2:class}')", 1653 | type: "getElementsByClassName", 1654 | description: 1655 | "Returns a HTML collection of elements with the given class name", 1656 | fileTypes: ["tsx", "javascript"], 1657 | }, 1658 | { 1659 | prefix: "getn", 1660 | snippet: "${1:document}.getElementsByTagName('${2:tag}')", 1661 | type: "getElementsByTagName", 1662 | description: 1663 | "Returns a HTML collection of elements with the given tag name", 1664 | fileTypes: ["tsx", "javascript"], 1665 | }, 1666 | { 1667 | prefix: "ga", 1668 | snippet: "${1:document}.getAttribute('${2:attr}')", 1669 | type: "getAttribute", 1670 | description: "Returns the value of the specified attribute on the element", 1671 | fileTypes: ["tsx", "javascript"], 1672 | }, 1673 | { 1674 | prefix: "sa", 1675 | snippet: "${1:document}.setAttribute('${2:attr}')", 1676 | type: "setAttribute", 1677 | description: "Adds the attribute with the specified name on the element", 1678 | fileTypes: ["tsx", "javascript"], 1679 | }, 1680 | { 1681 | prefix: "ra", 1682 | snippet: "${1:document}.removeAttribute('${2:attr}')", 1683 | type: "removeAttribute", 1684 | description: "Removes the attribute with the specified name on the element", 1685 | fileTypes: ["tsx", "javascript"], 1686 | }, 1687 | { 1688 | prefix: "ih", 1689 | snippet: "${1:document}.innerHTML = '${2:elem}'", 1690 | type: "innerHTML", 1691 | description: "Gets or sets the HTML markup contained within an element", 1692 | fileTypes: ["tsx", "javascript"], 1693 | }, 1694 | { 1695 | prefix: "tc", 1696 | snippet: "${1:document}.textContent = '${2:content}'", 1697 | type: "textContent", 1698 | description: "Gets or sets the text content of the specified element", 1699 | fileTypes: ["tsx", "javascript"], 1700 | }, 1701 | { 1702 | prefix: "qs", 1703 | snippet: "${1:document}.querySelector('${2:selector}')", 1704 | type: "querySelector", 1705 | description: 1706 | "Returns the first element within the DOM that matches the specified selector(s)", 1707 | fileTypes: ["tsx", "javascript"], 1708 | }, 1709 | { 1710 | prefix: "qsa", 1711 | snippet: "${1:document}.querySelectorAll('${2:selector}')", 1712 | type: "querySelectorAll", 1713 | description: 1714 | "Returns a NodeList of all elements within the DOM that matches the specified selector(s)", 1715 | fileTypes: ["tsx", "javascript"], 1716 | }, 1717 | ]; 1718 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2016", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "resolveJsonModule": true, 7 | "allowJs": true, 8 | "outDir": "./dist", 9 | "removeComments": true, 10 | "esModuleInterop": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "strict": true 13 | }, 14 | "exclude": [ 15 | "./dist/**/*", 16 | "./postcss.config.js" 17 | ] 18 | } -------------------------------------------------------------------------------- /typings/acode.d.ts: -------------------------------------------------------------------------------- 1 | type Strings = string[]; 2 | declare var acode: Acode; 3 | 4 | interface WCPage extends HTMLElement { 5 | on(event: "hide" | "show", cb: (this: WCPage) => void): void; 6 | off(event: "hide" | "show", cb: (this: WCPage) => void): void; 7 | 8 | settitle(title: string): void; 9 | 10 | id: string; 11 | 12 | hide(): void; 13 | show(): void; 14 | 15 | get body(): HTMLElement | null; 16 | set body($el: HTMLElement | null); 17 | 18 | get innerHTML(): string; 19 | set innerHTML(html: string); 20 | 21 | get textContent(): string | null; 22 | set textContent(text: string); 23 | 24 | get lead(): HTMLElement; 25 | set lead($el: HTMLElement); 26 | 27 | get header(): HTMLElement; 28 | set header($el: HTMLElement); 29 | } 30 | 31 | interface Input { 32 | id: string; 33 | required?: boolean; 34 | type: string; 35 | match?: RegExp; 36 | value?: string; 37 | placeholder?: string; 38 | hints?: string; 39 | name?: string; 40 | disabled?: boolean; 41 | readOnly?: boolean; 42 | autofocus?: boolean; 43 | hidden?: boolean; 44 | onclick?: (event: Event) => void; 45 | onchange?: (event: Event) => void; 46 | } 47 | 48 | interface Acode { 49 | /** 50 | * Define a module 51 | * @param {string} name 52 | * @param {Object|function} module 53 | */ 54 | define(name: string, module: Object | Function): void; 55 | 56 | require(module: "fsOperation"): FsOperation; 57 | require(module: "loader"): LoaderDialog; 58 | require(module: "prompt"): PromptDialog; 59 | require(module: "alert"): AlertDialog; 60 | require(module: "fileBrowser"): FileBrowser; 61 | require(module: string): any; // Allow other modules 62 | 63 | exec(key: string, val: any): boolean | undefined; 64 | 65 | get exitAppMessage(): string | undefined; 66 | 67 | setLoadingMessage(message: string): void; 68 | 69 | setPluginInit( 70 | id: string, 71 | initFunction: ( 72 | baseUrl: string, 73 | $page: WCPage, 74 | options?: any 75 | ) => Promise, 76 | settings?: any 77 | ): void; 78 | 79 | getPluginSettings(id: string): any; 80 | 81 | setPluginUnmount(id: string, unmountFunction: () => void): void; 82 | 83 | /** 84 | * @param {string} id plugin id 85 | * @param {string} baseUrl local plugin url 86 | * @param {WCPage} $page 87 | */ 88 | initPlugin( 89 | id: string, 90 | baseUrl: string, 91 | $page: WCPage, 92 | options?: any 93 | ): Promise; 94 | 95 | unmountPlugin(id: string): void; 96 | 97 | registerFormatter( 98 | id: string, 99 | extensions: string[], 100 | format: () => Promise 101 | ): void; 102 | 103 | unregisterFormatter(id: string): void; 104 | 105 | format(selectIfNull?: boolean): Promise; 106 | 107 | fsOperation(file: string): any; 108 | 109 | newEditorFile(filename: string, options?: any): void; 110 | 111 | // readonly formatters(): { id: string; name: string; exts: string[] }[]; 112 | 113 | /** 114 | * @param {string[]} extensions 115 | * @returns {Array<[id: string, name: string]>} options 116 | */ 117 | getFormatterFor(extensions: string[]): [id: string, name: string][]; 118 | 119 | alert(title: string, message: string, onhide: () => void): void; 120 | 121 | loader( 122 | title: string, 123 | message: string, 124 | cancel: { timeout: number; callback: () => void } 125 | ): void; 126 | 127 | joinUrl(...args: string[]): string; 128 | 129 | addIcon(className: string, src: string): void; 130 | 131 | prompt( 132 | message: string, 133 | defaultValue: string, 134 | type: "textarea" | "text" | "number" | "tel" | "search" | "email" | "url", 135 | options?: { 136 | match: RegExp; 137 | required: boolean; 138 | placeholder: string; 139 | test: (value: string) => boolean; 140 | } 141 | ): Promise; 142 | 143 | confirm(title: string, message: string): Promise; 144 | 145 | select( 146 | title: string, 147 | options: [string, string, string, boolean][] | string, 148 | opts?: 149 | | { 150 | onCancel?: () => void; 151 | onHide?: () => void; 152 | hideOnSelect?: boolean; 153 | textTransform?: boolean; 154 | default?: string; 155 | } 156 | | boolean 157 | ): Promise; 158 | 159 | multiPrompt( 160 | title: string, 161 | inputs: Array, 162 | help: string 163 | ): Promise; 164 | 165 | fileBrowser( 166 | mode: "file" | "folder" | "both", 167 | info: string, 168 | doesOpenLast: boolean 169 | ): Promise< 170 | | { 171 | name: string; 172 | type: "file"; 173 | url: string; 174 | } 175 | | { 176 | list: { 177 | icon: string; 178 | isDirectory: boolean; 179 | isFile: boolean; 180 | mime: string; 181 | name: string; 182 | type: "file" | "folder"; 183 | uri: string; 184 | url: string; 185 | }[]; 186 | scroll: number; 187 | name: string; 188 | type: "folder"; 189 | url: string; 190 | } 191 | >; 192 | 193 | toInternalUrl(url: string): Promise; 194 | } 195 | -------------------------------------------------------------------------------- /typings/dialogBox.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Loader dialog box 3 | */ 4 | 5 | /** 6 | * Options for the loader dialog. 7 | */ 8 | interface LoaderOptions { 9 | timeout: number; 10 | oncancel: () => void; 11 | } 12 | 13 | /** 14 | * a loader dialog instance. 15 | */ 16 | interface Loader { 17 | setTitle(title: string): void; 18 | setMessage(message: string): void; 19 | hide(): void; 20 | destroy(): void; 21 | show(): void; 22 | } 23 | 24 | /** 25 | * methods of acode loader dialog api 26 | */ 27 | interface LoaderDialog { 28 | /** 29 | * Creates a new loader dialog. 30 | * 31 | * @param titleText - The title text to display. 32 | * @param message - The message to display (optional). 33 | * @param options - Options for the loader dialog (optional). 34 | * @returns A loader instance. 35 | */ 36 | create(titleText: string, message?: string, options?: LoaderOptions): Loader; 37 | 38 | /** 39 | * Destroys the loader dialog. 40 | */ 41 | destroy(): void; 42 | 43 | /** 44 | * Shows the loader dialog. 45 | */ 46 | show(): void; 47 | 48 | /** 49 | * Hides the loader dialog. 50 | */ 51 | hide(): void; 52 | 53 | /** 54 | * Shows the title loader. 55 | * 56 | * @param immortal - Indicates whether the title loader is permanent (optional). 57 | */ 58 | showTitleLoader(immortal?: boolean): void; 59 | 60 | /** 61 | * Removes the title loader. 62 | * 63 | * @param immortal - Indicates whether the title loader is permanent (optional). 64 | */ 65 | removeTitleLoader(immortal?: boolean): void; 66 | } 67 | 68 | /** 69 | * prompt dialog box 70 | */ 71 | 72 | /** 73 | * Options for the prompt dialog. 74 | */ 75 | interface PromptOptions { 76 | match?: RegExp; 77 | required?: boolean; 78 | placeholder?: string; 79 | test?: (value: any) => boolean; 80 | } 81 | 82 | /** 83 | * Represents the type of input for the prompt dialog. 84 | */ 85 | type PromptInputType = 86 | | "textarea" 87 | | "text" 88 | | "number" 89 | | "tel" 90 | | "search" 91 | | "email" 92 | | "url"; 93 | 94 | /** 95 | * Opens a prompt dialog. 96 | * 97 | * @param message - The message to display to the user. 98 | * @param defaultValue - The default value of the input. 99 | * @param type - The type of input (e.g., "textarea", "text", "number"). 100 | * @param options - Additional options for the prompt dialog (optional). 101 | * @returns A promise that resolves to the user's input value (string, number, or null if canceled). 102 | */ 103 | declare function prompt( 104 | message: string, 105 | defaultValue: string, 106 | type?: PromptInputType, 107 | options?: PromptOptions 108 | ): Promise; 109 | 110 | type PromptDialog = typeof prompt; 111 | 112 | 113 | /** 114 | * Opens an alert dialog. 115 | * 116 | * @param titleText - The title text of the alert. 117 | * @param message - The message to display in the alert. 118 | * @param onhide - A callback function to be called when the alert is closed (optional). 119 | */ 120 | declare function showAlert(titleText: string, message: string, onhide?: () => void): void; 121 | type AlertDialog = typeof showAlert; -------------------------------------------------------------------------------- /typings/editorFile.d.ts: -------------------------------------------------------------------------------- 1 | //declare var EditorFile: EditorFile; 2 | 3 | declare class EditorFile { 4 | focusedBefore: boolean; 5 | focused: boolean; 6 | loaded: boolean; 7 | loading: boolean; 8 | deletedFile: boolean; 9 | session: AceAjax.IEditSession | null; 10 | encoding: string; 11 | readOnly: boolean; 12 | markChanged: boolean; 13 | 14 | constructor(filename?: string, options?: FileOptions); 15 | 16 | get id(): string; 17 | set id(value: string); 18 | 19 | get filename(): string; 20 | set filename(value: string); 21 | 22 | get location(): string | null; 23 | set location(value: string); 24 | 25 | get uri(): string; 26 | set uri(value: string); 27 | 28 | get eol(): 'windows' | 'unix'; 29 | 30 | set eol(value: 'windows' | 'unix'); 31 | 32 | get editable(): boolean; 33 | set editable(value: boolean); 34 | 35 | get isUnsaved(): boolean; 36 | set isUnsaved(value: boolean); 37 | 38 | get name(): string; 39 | 40 | get cacheFile(): string; 41 | 42 | get icon(): string; 43 | 44 | get tab(): HTMLElement; 45 | 46 | get SAFMode(): SAFMode; 47 | 48 | writeToCache(): Promise; 49 | 50 | isChanged(): Promise; 51 | 52 | canRun(): Promise; 53 | 54 | readCanRun(): Promise; 55 | 56 | writeCanRun(cb: () => boolean | Promise): Promise; 57 | 58 | remove(force?: boolean): Promise; 59 | 60 | save(): Promise; 61 | 62 | saveAs(): Promise; 63 | 64 | setMode(mode?: string): void; 65 | 66 | makeActive(): void; 67 | 68 | removeActive(): void; 69 | 70 | openWith(): void; 71 | 72 | editWith(): void; 73 | 74 | share(): void; 75 | 76 | runAction(): void; 77 | 78 | run(): void; 79 | 80 | runFile(): void; 81 | 82 | render(): void; 83 | 84 | on(event: FileEvent, callback: () => void): void; 85 | 86 | off(event: FileEvent, callback: () => void): void; 87 | } -------------------------------------------------------------------------------- /typings/editorManager.d.ts: -------------------------------------------------------------------------------- 1 | declare var editorManager: EditorManager; 2 | 3 | type FileEvent = "switch-file" | "rename-file" | "save-file" | "file-loaded" | "file-content-changed" | "add-folder" | "remove-folder" | "new-file" | "init-open-file-list" | "update"; 4 | 5 | interface EditorManager { 6 | editor: AceAjax.Editor; 7 | getFile(checkFor: string | number, type: "id" | "name" | "uri"): EditorFile; 8 | addFile(file: EditorFile): void; 9 | switchFile(id: string): void; 10 | activeFile: EditorFile; 11 | hasUnsavedFiles(): number | null; 12 | files: Array; 13 | container: HTMLElement; 14 | isScrolling: boolean; 15 | on(event: FileEvent, callback: () => void): void; 16 | off(event: FileEvent, callback: () => void): void; 17 | emit(event: FileEvent, ...args: any[]): any; 18 | } 19 | 20 | type SAFMode = 'single' | 'tree' | null; 21 | 22 | interface CursorPosition { 23 | row: number; 24 | column: number; 25 | } 26 | 27 | interface FoldOptions { 28 | start: CursorPosition; 29 | end: CursorPosition; 30 | placeholder: string; 31 | ranges: FoldOptions[]; 32 | } 33 | 34 | type FileAction = 'VIEW' | 'EDIT' | 'SEND' | 'RUN'; 35 | 36 | interface FileOptions { 37 | isUnsaved?: boolean; 38 | render?: boolean; 39 | id?: string; 40 | uri?: string; 41 | text?: string; 42 | editable?: boolean; 43 | deletedFile?: boolean; 44 | SAFMode?: SAFMode; 45 | encoding?: string; 46 | cursorPos?: CursorPosition; 47 | scrollLeft?: number; 48 | scrollTop?: number; 49 | folds?: FoldOptions[]; 50 | } -------------------------------------------------------------------------------- /typings/fileBrowser.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * The type of the selected item, either 'file' or 'folder'. 3 | */ 4 | type ItemType = 'file' | 'folder'; 5 | 6 | /** 7 | * An object that contains information about the selected file or folder. 8 | */ 9 | interface SelectedFile { 10 | type: ItemType; 11 | url: string; 12 | name: string; 13 | } 14 | 15 | /** 16 | * The mode for the file browser, which can be 'file', 'folder', or 'both'. 17 | */ 18 | type BrowseMode = 'file' | 'folder' | 'both'; 19 | 20 | /** 21 | * Opens the file browser and allows the user to select a file or folder. 22 | * 23 | * @param mode - Specify the file browser mode, the value can be 'file', 'folder', or 'both'. 24 | * @param info - A small message to show what the file browser is opened for. 25 | * @param doesOpenLast - Should the file browser open the last visited directory. 26 | * @param defaultDir - Default directory to open. 27 | * @returns A promise that resolves to an object with the selected file or folder details. 28 | */ 29 | declare function openFileBrowser( 30 | mode?: BrowseMode, 31 | info?: string, 32 | doesOpenLast?: boolean, 33 | defaultDir?: { name: string; url: string }[] 34 | ): Promise; 35 | 36 | type FileBrowser = typeof openFileBrowser; 37 | -------------------------------------------------------------------------------- /typings/fsOperation.d.ts: -------------------------------------------------------------------------------- 1 | interface FsOperation { 2 | (url: string): FileSystem; 3 | } 4 | 5 | interface FileSystem { 6 | lsDir(): Promise; 7 | delete(): Promise; 8 | exists(): Promise; 9 | stat(): Promise; 10 | readFile(encoding: string | undefined): Promise; 11 | writeFile(data: FileContent): Promise; 12 | createFile(name: string, data: FileContent): Promise; 13 | createDirectory(name?: string): Promise; 14 | copyTo(dest: string): Promise; 15 | moveTo(dest: string): Promise; 16 | renameTo(newName: string): Promise; 17 | } 18 | 19 | interface FsFile { 20 | name: string; 21 | url: string; 22 | isFile: boolean; 23 | isDirectory: boolean; 24 | isLink: boolean; 25 | } 26 | 27 | interface FsStat { 28 | name: string; 29 | url: string; 30 | uri: string; // Deprecated 31 | isFile: boolean; 32 | isDirectory: boolean; 33 | isLink: boolean; 34 | length: number; 35 | lastModified: number; 36 | canRead: boolean; 37 | canWrite: boolean; 38 | } 39 | 40 | 41 | 42 | type FileContent = string | Blob | ArrayBuffer; 43 | -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | /// 5 | /// 6 | /// 7 | /// 8 | 9 | declare var ace: AceAjax.Ace; 10 | 11 | declare global { 12 | interface Window { 13 | toast(message: string, duration: number): void; 14 | ASSETS_DIRECTORY: string; 15 | CACHE_STORAGE: string; 16 | DATA_STORAGE: string; 17 | PLUGIN_DIR: string; 18 | DOES_SUPPORT_THEME: boolean; 19 | IS_FREE_VERSION: boolean; 20 | KEYBINDING_FILE: string; 21 | ANDROID_SDK_INT: number; 22 | addedFolder: AddedFolder; 23 | } 24 | } 25 | 26 | interface AddedFolder { 27 | url: string; 28 | remove: () => void; 29 | $node: HTMLElement; 30 | reload: () => void; 31 | listState: Map; 32 | reloadOnResume: boolean; 33 | saveState: boolean; 34 | title: string; 35 | id: string; 36 | } 37 | 38 | export {}; -------------------------------------------------------------------------------- /typings/settings.d.ts: -------------------------------------------------------------------------------- 1 | 2 | declare type fileBrowserSettings = { 3 | showHiddenFiles: string; 4 | sortByName: string; 5 | }; 6 | 7 | declare type searchAndFindSettings = { 8 | wrap: boolean; 9 | caseSensitive: boolean; 10 | regExp: boolean; 11 | }; 12 | 13 | declare class Settings { 14 | update( 15 | settings?: { [key: string]: any } | boolean, 16 | showToast?: boolean, 17 | saveFile?: boolean 18 | ): Promise; 19 | reset(setting?: string): Promise; 20 | on(event: `update:${string}` | `update:${string}:after` | 'reset', callback: () => void): void; 21 | off(event: 'update' | 'reset', callback: () => void): void; 22 | get(key: string): any; 23 | 24 | applyAnimationSetting(): Promise; 25 | applyLangSetting(): Promise; 26 | } 27 | --------------------------------------------------------------------------------