{"id":18303254,"url":"https://github.com/erickpetru/cps-elements-example-vite","last_synced_at":"2026-05-09T00:08:03.106Z","repository":{"id":232810354,"uuid":"621989958","full_name":"ErickPetru/cps-elements-example-vite","owner":"ErickPetru","description":"Um modelo de configuração mínima demonstrando como importar componentes CPS Elements com Vite como empacotador do projeto.","archived":false,"fork":false,"pushed_at":"2023-04-17T19:53:13.000Z","size":42,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-15T04:26:16.180Z","etag":null,"topics":["vite","web-components"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/cps-elements-example-vite","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/ErickPetru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2023-03-31T20:47:18.000Z","updated_at":"2023-09-13T13:22:13.000Z","dependencies_parsed_at":"2024-04-11T16:09:02.315Z","dependency_job_id":"e9125b74-687b-455b-ba85-5ef997724d8f","html_url":"https://github.com/ErickPetru/cps-elements-example-vite","commit_stats":null,"previous_names":["erickpetru/cps-elements-example-vite"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErickPetru%2Fcps-elements-example-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErickPetru%2Fcps-elements-example-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErickPetru%2Fcps-elements-example-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ErickPetru%2Fcps-elements-example-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ErickPetru","download_url":"https://codeload.github.com/ErickPetru/cps-elements-example-vite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248018094,"owners_count":21034051,"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":["vite","web-components"],"created_at":"2024-11-05T15:25:01.735Z","updated_at":"2026-05-09T00:07:58.079Z","avatar_url":"https://github.com/ErickPetru.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CPS Elements - Exemplo - Vite\r\n\r\nUm modelo de configuração mínima demonstrando como importar componentes [CPS Elements](https://github.com/cpsrepositorio/cps-elements) com [Vite](https://vitejs.dev) como empacotador do projeto.\r\n\r\n\u003e **CPS Elements** é parte do projeto de UI/UX institucional, que também sustenta o [CPS Design System](https://cpsrepositorio.github.io/cps-design-system/), projetados originalmente pelo professor [Erick Petrucelli](https://github.com/ErickPetru). Independentemente de suas origens e motivações iniciais, é um projeto totalmente _open-source_ disponível sob os termos da licença [MIT](https://github.com/cpsrepositorio/cps-elements/blob/main/LICENSE.md).\r\n\r\nCuriosamente, este exemplo na verdade mostra como nenhuma configuração extra é necessária com Vite! Apenas a instalação da biblioteca de componentes e as importações básicas de estilos e componentes, fim.\r\n\r\n_Opcionalmente_, recursos podem carregados pela instalação local ao invés de serem carregados por CDN. Para tal, a única configuração extra necessária é copiar os ícones de `node_modules/@cps-elements/web/assets` para `assets` da distribuição empacotada, através do `vite-plugin-static-copy`. De fato, esta escolha opcional é o único motivo para o qual este projeto de exemplo contém um arquivo [vite.config.js](./vite.config.js).\r\n\r\nObserve que Vite pode ser usado com _frameworks_ JavaScript, onde configurações extras podem ser necessárias, embora em geral rápidas e bem documentadas. De qualquer forma, para utilização com Web nativa, ou seja, HTML, CSS e JavaScript puros, tudo é _out-of-the-box_.\r\n\r\n## Visualizando no StackBlitz\r\n\r\nEste projeto pode ser executado, visualizado e até editado _online_. [Abrir no StackBlitz ⚡️](https://stackblitz.com/edit/cps-elements-example-vite)\r\n\r\n## Executando manualmente este projeto\r\n\r\nPara execução com _hot-reload_ em modo de desenvolvimento:\r\n\r\n```sh\r\nnpm run dev\r\n```\r\n\r\nPara compilar para produção:\r\n\r\n```sh\r\nnpm run build\r\n```\r\n\r\nPara iniciar um servidor local e testar a compilação de produção:\r\n\r\n```sh\r\nnpm run preview\r\n```\r\n\r\nEntão abra o navegador na URL exibida após os comandos.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferickpetru%2Fcps-elements-example-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferickpetru%2Fcps-elements-example-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferickpetru%2Fcps-elements-example-vite/lists"}