{"id":16949520,"url":"https://github.com/guastallaigor/puzzle-pattern","last_synced_at":"2025-03-22T13:31:15.010Z","repository":{"id":97589730,"uuid":"130778218","full_name":"guastallaigor/puzzle-pattern","owner":"guastallaigor","description":"Vue.js development pattern created for code organization, while using the best practices, clean code, and much more.","archived":false,"fork":false,"pushed_at":"2021-02-24T00:46:37.000Z","size":2498,"stargazers_count":35,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T11:39:04.927Z","etag":null,"topics":["clean-architecture","cleancode","code-organization","code-quality","development-practices","pattern","vue","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":null,"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/guastallaigor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"guastallaigor"}},"created_at":"2018-04-24T01:27:08.000Z","updated_at":"2024-03-21T21:20:37.000Z","dependencies_parsed_at":"2023-04-14T07:57:27.855Z","dependency_job_id":null,"html_url":"https://github.com/guastallaigor/puzzle-pattern","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fpuzzle-pattern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fpuzzle-pattern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fpuzzle-pattern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fpuzzle-pattern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guastallaigor","download_url":"https://codeload.github.com/guastallaigor/puzzle-pattern/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244962798,"owners_count":20539226,"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":["clean-architecture","cleancode","code-organization","code-quality","development-practices","pattern","vue","vuejs","vuejs2"],"created_at":"2024-10-13T21:55:08.852Z","updated_at":"2025-03-22T13:31:15.001Z","avatar_url":"https://github.com/guastallaigor.png","language":null,"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"/static/puzzle_logo.png\" width=\"128px\"\u003e\n  \u003ch1\u003ePuzzle Pattern\u003c/h1\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  Puzzle Pattern is a Vue.js development pattern created for code organization, while using the best practices, clean code, and much more.\n\u003c/p\u003e\n\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/guastallaigor/hare/master/LICENSE)\n\n## Why use Puzzle Pattern?\n\nWhen you are working with several different developers in one single project, the code tends to variate a lot one file to the other.\n\n[ESLint](https://eslint.org/) usually helps us with that already. However, there are a lot of cases some linters may look the other way, when it shouldn't.\n\nIf you wish to maintain a code pattern throughout your entire project, with clean and organized code, that can also help with code maintenance, **this is the pattern for you!**\n\n\u003ca name=\"1\"\u003e\u003c/a\u003e\n\n## [1](#1) MUST\n\n\u003ca name=\"1.1\"\u003e\u003c/a\u003e\n\n- [1.1](#1.1) Use ES6 in full capacity;\n  \u003ca name=\"1.2\"\u003e\u003c/a\u003e\n- [1.2](#1.2) Set a default language to be used throughout the project. If it's not your native language, define all the words will not be translated;\n  \u003ca name=\"1.3\"\u003e\u003c/a\u003e\n- [1.3](#1.3) Define a code order inside your `\u003cscript\u003e` that must be followed throughout all components. Only declare it if you are going to use it in your component. The recommended order is:\n\n```javascript\n// imports\nexport default {\n  name: \"\",\n  props: {},\n  components: {},\n  mixins: [],\n  directives: {},\n  data: () =\u003e ({}),\n  computed: {},\n  filters: {},\n  beforeCreate() {},\n  created() {},\n  beforeMount() {},\n  mounted() {},\n  beforeUpdate() {},\n  updated() {},\n  beforeDestroy() {},\n  destroyed() {},\n  methods: {},\n  watch: {},\n};\n```\n\n\u003ca name=\"1.4\"\u003e\u003c/a\u003e\n\n- [1.4](#1.4) Props must always be an object with a declared type;\n  \u003ca name=\"1.5\"\u003e\u003c/a\u003e\n- [1.5](#1.5) Props should be declared with lower `camelCase`. However, in the HTML they must be called with `kebab-case`;\n  \u003ca name=\"1.6\"\u003e\u003c/a\u003e\n- [1.6](#1.6) Pass a parameter method only when needed;\n  \u003ca name=\"1.7\"\u003e\u003c/a\u003e\n- [1.7](#1.7) Prioritize the use of `const`, otherwise use `let`;\n  \u003ca name=\"1.8\"\u003e\u003c/a\u003e\n- [1.8](#1.8) The `data ()` declaration must be like this: `data: () =\u003e ({});` or `data: vm =\u003e ({});` when you need to use a Vue instance property.\n  \u003ca name=\"1.9\"\u003e\u003c/a\u003e\n- [1.9](#1.9) If you wish to use the queryString when sending a GET request, use the `{ params }` object;\n  \u003ca name=\"1.10\"\u003e\u003c/a\u003e\n- [1.10](#1.10) The `export default` must be at the same level of indentation as the `\u003cscript\u003e`. The same goes for the first CSS property inside the `\u003cstyle\u003e`;\n  \u003ca name=\"1.11\"\u003e\u003c/a\u003e\n- [1.11](#1.11) Remove all unused declarations, `vars` and empty tags. The same goes for the `\u003cscript\u003e` and `\u003cstyle\u003e`;\n  \u003ca name=\"1.12\"\u003e\u003c/a\u003e\n- [1.12](#1.12) One line break after all the `imports`;\n  \u003ca name=\"1.13\"\u003e\u003c/a\u003e\n- [1.13](#1.13) One space always before and after a variable inside an interpolation;\n  \u003ca name=\"1.14\"\u003e\u003c/a\u003e\n- [1.14](#1.14) Double quotes in all HTML tag attributes;\n  \u003ca name=\"1.15\"\u003e\u003c/a\u003e\n- [1.15](#1.15) When a tag has more than one attribute, for each attribute place a line break;\n  \u003ca name=\"1.16\"\u003e\u003c/a\u003e\n- [1.16](#1.16) Put a line break after each dot inside your script whenever possible;\n  \u003ca name=\"1.17\"\u003e\u003c/a\u003e\n- [1.17](#1.17) When calling a method inside your HTML component, always put the parentheses \"()\";\n  \u003ca name=\"1.18\"\u003e\u003c/a\u003e\n- [1.18](#1.18) Only use `mapGetters` when you are manipulating the `state`;\n  \u003ca name=\"1.19\"\u003e\u003c/a\u003e\n- [1.19](#1.19) Moderate use of [vuex](https://github.com/vuejs/vuex), only in cases when you need the same state in a few components;\n  \u003ca name=\"1.20\"\u003e\u003c/a\u003e\n- [1.20](#1.20) Using [vuex](https://github.com/vuejs/vuex), always use `mapGetters`, `mapState`, `mapActions` and `mapMutations`, instead of `this.$store`;\n  \u003ca name=\"1.21\"\u003e\u003c/a\u003e\n- [1.21](#1.21) A [vuex's](https://github.com/vuejs/vuex) action should always return a promise.\n  \u003ca name=\"1.22\"\u003e\u003c/a\u003e\n- [1.22](#1.22) `HTML` tags must have their declaration in the following order: Tag, id, class, attributes.\n  \u003ca name=\"1.23\"\u003e\u003c/a\u003e\n- [1.23](#1.23) `Destructuring assignment` should be only for variables and never for methods. Example: `let { girls, guys, women, men } = state`.\n  \u003ca name=\"1.24\"\u003e\u003c/a\u003e\n- [1.24](#1.24) Component files must have upper `camel Case` name (**except** in `index.vue` files).\n\n\u003ca name=\"2\"\u003e\u003c/a\u003e\n\n## [2](#2) SHOULD\n\n\u003ca name=\"2.1\"\u003e\u003c/a\u003e\n\n- [2.1](#2.1) Use `computed properties` in your HTML instead of methods;\n  \u003ca name=\"2.2\"\u003e\u003c/a\u003e\n- [2.2](#2.2) Use `filter`, `map`, `reduce` and `find`;\n  \u003ca name=\"2.3\"\u003e\u003c/a\u003e\n- [2.3](#2.3) Create customized events rather than props with type Function which returns a callback;\n  \u003ca name=\"2.4\"\u003e\u003c/a\u003e\n- [2.4](#2.4) Use the `created ()` _Lifecycle_ rather than `mounted ()`;\n  \u003ca name=\"2.5\"\u003e\u003c/a\u003e\n- [2.5](#2.5) Use `v-if` instead of `v-show`;\n  \u003ca name=\"2.6\"\u003e\u003c/a\u003e\n- [2.6](#2.6) Use the `.sync` modifier rather than `v-model`;\n  \u003ca name=\"2.7\"\u003e\u003c/a\u003e\n- [2.7](#2.7) Use display flex rather than other types of display;\n  \u003ca name=\"2.8\"\u003e\u003c/a\u003e\n- [2.8](#2.8) Import your files with \"@\" rather than \"../\";\n  \u003ca name=\"2.9\"\u003e\u003c/a\u003e\n- [2.9](#2.9) Whenever you are going to duplicate a code, create a mixin instead and declare it locally.\n\n\u003ca name=\"3\"\u003e\u003c/a\u003e\n\n## [3](#3) AVOID\n\n\u003ca name=\"3.1\"\u003e\u003c/a\u003e\n\n- [3.1](#3.1) Using watchs, use computed instead;\n  \u003ca name=\"3.2\"\u003e\u003c/a\u003e\n- [3.2](#3.2) Using `var`, use `const` or `let` instead;\n  \u003ca name=\"3.3\"\u003e\u003c/a\u003e\n- [3.3](#3.3) Using `else`, prioritize early return;\n  \u003ca name=\"3.4\"\u003e\u003c/a\u003e\n- [3.4](#3.4) Using `switch case`;\n  \u003ca name=\"3.5\"\u003e\u003c/a\u003e\n- [3.5](#3.5) Using `forEach`, `for in`, `for` and `while`;\n  \u003ca name=\"3.6\"\u003e\u003c/a\u003e\n- [3.6](#3.6) Using the attribute `style` static in your HTML tags;\n  \u003ca name=\"3.7\"\u003e\u003c/a\u003e\n- [3.7](#3.7) Using `scoped` on your `\u003cstyle\u003e`, instead create a class and wrap all your `\u003ctemplate\u003e` on it, then put all other class you have inside that one;\n  \u003ca name=\"3.8\"\u003e\u003c/a\u003e\n- [3.8](#3.8) Using the `beforeUpdate ()` and `updated ()` _Lifecycle_;\n  \u003ca name=\"3.9\"\u003e\u003c/a\u003e\n- [3.9](#3.9) Using the directive `v-html`;\n  \u003ca name=\"3.10\"\u003e\u003c/a\u003e\n- [3.10](#3.10) Using more than one props type;\n  \u003ca name=\"3.11\"\u003e\u003c/a\u003e\n- [3.11](#3.11) Declaring global filters;\n  \u003ca name=\"3.12\"\u003e\u003c/a\u003e\n- [3.12](#3.12) Declaring global directives;\n  \u003ca name=\"3.13\"\u003e\u003c/a\u003e\n- [3.13](#3.13) Declaring global components with `Vue.component()`;\n  \u003ca name=\"3.14\"\u003e\u003c/a\u003e\n- [3.14](#3.14) Treating Date as a String, use [momentjs](https://momentjs.com/) instead;\n  \u003ca name=\"3.15\"\u003e\u003c/a\u003e\n- [3.15](#3.15) Having several levels of indentation;\n  \u003ca name=\"3.16\"\u003e\u003c/a\u003e\n- [3.16](#3.16) In a request, avoid grabbing all of the `response`. Instead, grab only what you are going to actually use.\n\n\u003ca name=\"4\"\u003e\u003c/a\u003e\n\n## [4](#4) DON'T\n\n\u003ca name=\"4.1\"\u003e\u003c/a\u003e\n\n- [4.1](#4.1) Declare global mixins;\n  \u003ca name=\"4.2\"\u003e\u003c/a\u003e\n- [4.2](#4.2) Use the `v-bind` directive. Instead, use the short term (:);\n  \u003ca name=\"4.3\"\u003e\u003c/a\u003e\n- [4.3](#4.3) Use the `v-on` directive. Instead, use the short term (@);\n  \u003ca name=\"4.4\"\u003e\u003c/a\u003e\n- [4.4](#4.4) Use a `div` as an actual `div` using [Pug](https://github.com/pugjs/pug). Create a class or id instead;\n  \u003ca name=\"4.5\"\u003e\u003c/a\u003e\n- [4.5](#4.5) Use `style`, `height`, `width`, and other **static** attribute tags inside them directly. Create a class instead;\n  \u003ca name=\"4.6\"\u003e\u003c/a\u003e\n- [4.6](#4.6) Use [jQuery](https://jquery.com/).\n\n### Code Style Recommended\n\nThis is the code style that was used to create this pattern and it's recommended to use Puzzle Pattern in it's full potential.\n\n[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)\n\n### Template Engine Recommended\n\n[Pug](https://github.com/pugjs/pug) is highly recommended to use in all your `\u003ctemplate\u003e` thorough your project.\n\n### TODO\n\n- [ ] Add code examples.\n- [ ] Develop a Puzzle ESLint.\n- [ ] Develop a Puzzle Editor Plugin.\n\n## Contributors\n\n\u003cdiv style=\"display:flex;flex-flow:row wrap;align-items:center;margin-bottom:20px;\"\u003e\n  \u003ca href=\"https://github.com/guastallaigor\"\u003e\n    \u003cimg\n      align=\"center\"\n      src=\"/static/contributor_1.png\"\n      width=\"100px\"\n      height=\"100px\"\n      style=\"padding-right:10px\"\n      alt=\"guastallaigor\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/iliojunior\"\u003e\n    \u003cimg\n      align=\"center\"\n      src=\"/static/contributor_2.png\"\n      width=\"100px\"\n      height=\"100px\"\n      alt=\"iliojunior\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/EduardoDrozda\"\u003e\n    \u003cimg\n      align=\"center\"\n      src=\"/static/contributor_3.png\"\n      width=\"100px\"\n      height=\"100px\"\n      alt=\"EduardoDrozda\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C1C63QCB8)\n\n## License\n\nMIT © [guastallaigor](https://github.com/guastallaigor/puzzle-pattern)\n","funding_links":["https://ko-fi.com/guastallaigor","https://ko-fi.com/C1C63QCB8"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguastallaigor%2Fpuzzle-pattern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguastallaigor%2Fpuzzle-pattern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguastallaigor%2Fpuzzle-pattern/lists"}