{"id":13533580,"url":"https://github.com/SergioCrisostomo/vue-codemods","last_synced_at":"2025-04-01T22:30:25.340Z","repository":{"id":46924666,"uuid":"202798469","full_name":"SergioCrisostomo/vue-codemods","owner":"SergioCrisostomo","description":"Collection of codemod scripts that help update and refactor Vue and JavaScript files.","archived":false,"fork":false,"pushed_at":"2023-01-06T02:05:25.000Z","size":961,"stargazers_count":24,"open_issues_count":11,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-31T21:51:31.178Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SergioCrisostomo.png","metadata":{"files":{"readme":"Readme.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-16T20:59:56.000Z","updated_at":"2024-04-18T15:11:59.000Z","dependencies_parsed_at":"2023-02-05T02:32:41.598Z","dependency_job_id":null,"html_url":"https://github.com/SergioCrisostomo/vue-codemods","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioCrisostomo%2Fvue-codemods","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioCrisostomo%2Fvue-codemods/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioCrisostomo%2Fvue-codemods/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SergioCrisostomo%2Fvue-codemods/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SergioCrisostomo","download_url":"https://codeload.github.com/SergioCrisostomo/vue-codemods/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222774628,"owners_count":17035752,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T07:01:21.175Z","updated_at":"2024-11-02T20:31:45.092Z","avatar_url":"https://github.com/SergioCrisostomo.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","By Environment","Dev Tools [🔝](#readme)","Frameworks","Table of Contents"],"sub_categories":["Dev Tools","JavaScript/TypeScript","Vue.js","Codemods"],"readme":"# Vue codemods\n\nThis repository contains a collection of codemod scripts for use with JSCodeshift that help update and refactor Vue and JavaScript files.\n\n\n### How to use:\n\n    $ npm install vue-codemods\n    $ cd vue-codemods\n    $ node ./transformers/sort_keys/sortKeys.js --path \u003cfolder with vue files\u003e\n\n### Transformers:\n\n - **Sort keys:** Sort object keys sorts Vue API properties according to [Vue's styleguide](https://vuejs.org/v2/style-guide/).  \n - **Uppercase constants renamer:** Renames all constant declarations and optionaly DRY them.\n - **Extract non instance methods:** Finds methods in the Vue object and removes the ones that do not depend on `this`, declaring them instead as functions outside the Vue object.\n\n#### Transformers explanation:\n\n**Sort keys:**\n\nSort object keys sorts Vue API properties according to [Vue's styleguide](https://vuejs.org/v2/style-guide/).  \n This transformer does:\n\n - sort Vue API properties alphabetically\n - sort keys inside each of the vue API properties\n \nExample:\n\n    $ node transformers/sort_keys/sortKeys.js --path \u003cfolder with vue or js files\u003e\n\n\nBefore the transform:\n\n```\n  computed: {\n    ...mapGettersB(),\n    computedB() {\n      return 'B';\n    },\n    computedA() {\n      return 'A';\n    },\n    ...mapGettersA(),\n  },\n  props: {\n    b: ['bar'],\n    c: ['baz'],\n    a: ['foo'],\n  },\n```\n\nAfter the transform:\n\n```\n  computed: {\n    ...mapGettersB(),\n    ...mapGettersA(),\n\n    computedA() {\n      return 'A';\n    },\n\n    computedB() {\n      return 'B';\n    }\n  },\n  props: {\n    a: ['foo'],\n    b: ['bar'],\n    c: ['baz'],\n  },\n\n```\n\nYou might want to run your ESLint after the transformer was applied, to keep your codestyle.\n\n**Uppercase constants renamer:**\n\nRenames all constant declarations and optionaly DRY them. This transformer does:\n\n - rename variable names of constant literals to UPPERCASE_SNAKE_CASE\n - replaces duplicate strings with variable names (DRY) (optional)\n \nThe options are:\n\n - `which`, can be `all`, `multiple` or `global`\n    + `all`: rename all ocurrencies\n    + `multiple`: rename only ocurrencies that show upp more than once (default)\n    + `global`: rename only ocurrencies declared in the global space\n - `dry`, can be `true` or `false` - to replace duplicate string declarations with variable names \n \n \nExample:\n\n    $ node transformers/uppercase_constants/uppercaseConstants.js --path \u003cfolder with vue or js files\u003e\n\n\nBefore the transform:\n\n```\nconst myRepeatedString = 'Some string';\nlet dynamicString = 'Dynamic string';\nfunction foo() {\n  return myRepeatedString + '!' + 'Some string';\n}\n\nfunction bar() {\n  let myRepeatedString = 'Some other string';\n  return myRepeatedString + '...';\n}\n\nconst myUniqueString = 'I only show up once...';\n\nconsole.log(foo('Some string'), bar(), dynamicString, myRepeatedString);\n\n```\n\nAfter the transform, with options `{which: 'all', dry: true}`:\n\n```\nconst MY_REPEATED_STRING = 'Some string';\nlet dynamicString = 'Dynamic string';\nfunction foo() {\n  return MY_REPEATED_STRING + '!' + MY_REPEATED_STRING;\n}\n\nfunction bar() {\n  let MY_REPEATED_STRING = 'Some other string';\n  return MY_REPEATED_STRING + '...';\n}\n\nconst myUniqueString = 'I only show up once...';\n\nconsole.log(foo(MY_REPEATED_STRING), bar(), dynamicString, MY_REPEATED_STRING);\n\n\n```\n\n**Extract non instance methods:**\n\nFinds methods in the Vue object and removes the ones that do not depend on `this`, declaring them instead as functions outside the Vue object.\n\u003e**Note**: this codemod takes into account the usage of methods in the template so it will **not** extract methods that are used in the template, \nwhich would break code.\n \nExample:\n\n    $ node transformers/extract_non_instance_methods/extractNonInstanceMethods.js --path \u003cfolder with vue or js files\u003e\n\n\nBefore the transform:\n\n```\n\u003ctemplate\u003e\n  \u003cdiv :some-prop=\"noThisButUsedInTemplate1('foo')\" @click=\"noThisButUsedInTemplate2\"\u003e\n    Some test template\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  name: 'Component',\n  methods: {\n    close() {\n      if (this.isClosed) {\n        return;\n      }\n\n      this.isOpen = false;\n      this.$emit('close');\n    },\n    noThis() {\n      return 'I should be extracted to the global space';\n    },\n    noThisButUsedInTemplate1() {\n      return 'I should stay in the instance';\n    },\n    noThisButUsedInTemplate2() {\n      return 'I should stay in the instance';\n    },\n  },\n};\n\u003c/script\u003e\n```\n\nAfter the transform:\n\n```\n\u003ctemplate\u003e\n  \u003cdiv :some-prop=\"noThisButUsedInTemplate1('foo')\" @click=\"noThisButUsedInTemplate2\"\u003e\n    Some test template\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nconst noThis = function() {\n  return 'I should be extracted to the global space';\n};\n\nexport default {\n  name: 'Component',\n  methods: {\n    close() {\n      if (this.isClosed) {\n        return;\n      }\n\n      this.isOpen = false;\n      this.$emit('close');\n    },\n\n    noThisButUsedInTemplate1() {\n      return 'I should stay in the instance';\n    },\n\n    noThisButUsedInTemplate2() {\n      return 'I should stay in the instance';\n    }\n  },\n};\n\u003c/script\u003e\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSergioCrisostomo%2Fvue-codemods","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSergioCrisostomo%2Fvue-codemods","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSergioCrisostomo%2Fvue-codemods/lists"}