{"id":13511182,"url":"https://github.com/trufflesuite/drizzle","last_synced_at":"2025-03-30T20:32:42.878Z","repository":{"id":35045387,"uuid":"197872600","full_name":"trufflesuite/drizzle","owner":"trufflesuite","description":"Reactive Ethereum dapp UI suite","archived":true,"fork":false,"pushed_at":"2023-01-24T06:13:32.000Z","size":10200,"stargazers_count":910,"open_issues_count":90,"forks_count":239,"subscribers_count":31,"default_branch":"develop","last_synced_at":"2024-05-08T03:32:54.327Z","etag":null,"topics":["hacktoberfest"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trufflesuite.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-20T03:07:44.000Z","updated_at":"2024-05-06T19:34:17.000Z","dependencies_parsed_at":"2023-02-13T18:32:23.412Z","dependency_job_id":null,"html_url":"https://github.com/trufflesuite/drizzle","commit_stats":null,"previous_names":["trufflesuite/drizzle-suite"],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trufflesuite%2Fdrizzle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trufflesuite%2Fdrizzle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trufflesuite%2Fdrizzle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trufflesuite%2Fdrizzle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trufflesuite","download_url":"https://codeload.github.com/trufflesuite/drizzle/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245754845,"owners_count":20667015,"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":["hacktoberfest"],"created_at":"2024-08-01T03:00:37.227Z","updated_at":"2025-03-30T20:32:42.854Z","avatar_url":"https://github.com/trufflesuite.png","language":"JavaScript","funding_links":[],"categories":["List of Web3 Libraries","JavaScript","dApps directory","开源项目"],"sub_categories":["Smart Contract Tools","JavaScript web3 项目"],"readme":"\u003cimg src=\"https://truffleframework.com/img/drizzle-logo-dark.svg\" width=\"200\"\u003e\n\n----\n\n**Note:** _This monorepo is aligned with our `@drizzle` scoped package release of 1.5.0. If you are looking for our old drizzle repo, it has been moved [here](https://github.com/trufflesuite/drizzle-legacy)._\n\nOverview\n--------\n\nDrizzle is a collection of libraries to simplify development of your dapps\nin Plain JavaScript, React and Vue.\n\n* [@drizzle/store](./packages/store/README.md):- is the state manager of\n    Drizzle. It handles the boilerplate for web3 connection as\n    synchronizing Smart Contract state and events.\n\n* [@drizzle/react-plugin](./packages/react-plugin/README.md):- defines the\n    Drizzle Provider for a React project.\n\n* [@drizzle/react-components](./packages/react-components/README.md):- is a\n    collection of primitive web controls that transforms Smart Contract data\n    types to their appropriate html controls.  It's the fastest way to visualize\n    Contract data on a browser with React!\n\n* [@drizzle/vue-plugin](./packages/vue-plugin/README.md):- a Vue adaptor and\n    collection of html controls that will get your Vue dapp up and running\n    quickly!\n\nContributing to `drizzle`\n-------------------------------\n\n_Thanks for taking the time to help out and improve `drizzle`! :tada:_\n\nThe following is a set of guidelines for `drizzle` contributions and may\nchange over time. Feel free to suggest improvements to this document in a pull\nrequest!\n\n\nHow Can I Contribute?\n---------------------\n\nAll contributions are welcome!\n\nIf you run into an issue, the first step is to reach out in [our community\nGitter channel](https://gitter.im/ConsenSys/truffle), in case others have run\ninto the problem or know how to help.\n\nTo report a problem or to suggest a new feature, [open a GitHub\nIssue](https://github.com/trufflesuite/drizzle/issues/new). This will\nalert us of the problem so we can prioritize a fix.\n\nFor code contributions, for either new features or bug fixes, see\n[Development](#development).\n\nIf you're looking to make a substantial change, you may want to reach out first\nto give us a heads up.\n\n\nDevelopment Requirements\n------------------------\n\nIn order to develop `drizzle`, you'll need:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org)\n- [Yarn](https://yarnpkg.com)\n- [Lerna](https://lerna.js.org/)\n- [Ganache-cli](https://github.com/trufflesuite/ganache-cli)\n\n### Getting Started\n\nFirst clone this repository and install NPM dependencies:\n\n    $ git clone git@github.com:trufflesuite/drizzle.git\n    $ cd drizzle\n    $ yarn\n\nIf all is good, navigate (`cd`) to the package of interest and\nfollow the README document there.\n\n### Forks, Branches, and Pull Requests\n\nCommunity contributions to `drizzle` require that you first fork the\nrepository. After your modifications, push changes to your\nfork(s) and submit a pull request upstream to `trufflesuite`.\n\nSee GitHub documentation about [Collaborating with issues and pull\nrequests](https://help.github.com/categories/collaborating-with-issues-and-pull-requests/)\nfor more information.\n\n\u003e :exclamation: **Note:** _`drizzle` development uses a long-lived\n\u003e `develop` branch for new (non-hotfix) development. Pull Requests should be\n\u003e opened against `develop` in all repositories._\n\n#### Branching Model\n\n`drizzle` projects adhere to Gitflow, a Git workflow designed around a\nstrict branching model to more easily track feature development vs. releases.\n[For more information on Gitflow, check out Atlassian's helpful\nguide](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow).\n\nWe can separate our branches into long-lived and purposeful branches. We have two long-lived branches:\n\n- **`master`**, checkout for hotfix development; in sync with the latest\n    `release` (synced after the release has gone out publicly).\n- **`develop`**, checkout for feature development; latest unstable releases\n    and work targeting the next major or minor release.\n\nAll development is done on branches with a `prefix/title` style naming\nconvention. These are later merged into `develop` and finally a `release` branch\nbefore final release. These are the two prefixes we use:\n\n- **`feature/`**, for new feature development; later merged with `develop` and `release`.\n- **`fix/`**, for hotfix development; later merged with `master` and `develop`.\n\nFor example, a fix for a contract fetching error might look like: `fix/contract-fetching`.\n\n#### Working on a Branch\n\nUse a branch for your modifications, tracking it on your fork:\n\n    $ git checkout -b feature/sweet-feature // or \"fix/\" prefix if a hotfix\n    $ git push -u ChocolateLover feature/sweet-feature\n\nThen, make changes and commit as usual.\n\n\n#### Testing and debugging with Ganache\n\nStart and wait for Ganache to initialize.\n\n    $ yarn ganache\n\nYou'll know when the console shows the following:\n\n    test-truffle-contracts: Listening on 127.0.0.1:9545\n\nOpen up another terminal and deploy the contracts to Ganache:\n\n    $ yarn ganache:deploy\n\nDeployment is done when the following is logged to the console:\n\n    test-truffle-contracts: Summary\n    test-truffle-contracts: =======\n    test-truffle-contracts: \u003e Total deployments:   4\n    test-truffle-contracts: \u003e Final cost:          ... ETH\n\nStart the front end test apps:\n\n    yarn serve:ui\n\nNow you'll have 3 apps to interact with.\n\n  - [Generic React app](http://localhost:3000) on port 3000\n  - [React app using the context API](http://localhost:3001) on port 3001\n  - [Vue app](http://localhost:3002) on port 3002\n\n\n#### Testing and debugging your code\n\nBecause these libraries are dependencies to your front end project, you'll want\nto be run your project against the local changes you're working on. Use `yarn\nlink`\n\nFirst navigate to the package you want to work on. For example, if you're\nworking on the vue-plugin.\n\n    $ cd packages/vue-plugin\n    $ yarn link    # sym-link package to yarn's global scope\n    $ yarn prepare # build your changes\n\nNow that the package has been linked, yarn will be able to resolve it when you\nspecify it as a dependency.\n\nNavigate to your front end project:\n\n    $ yarn link @drizzle/vue-plugin  # use your local vue-plugin\n\n\n### Important NPM Scripts for Development\n\nCleaning:\n\n- `clean`: Clean all non-root workspaces\n- `clean:all`: All workspaces including root and removes yarn.lock\n\nRunning the Test UIs:\n\n- `ganache`: Launch a Ganache instance\n- `ganache:deploy`: Deploy some test contracts to an existing Ganache instance\n- `serve:ui`: Launch the test UIs that work with the two Ganache commands above\n\nWebpack bundle size report:\n\n- `webpack-reports`: Creates a report of the bundle size\n\nTests:\n\n- `test`: Run all tests\n- `test:store`: Run only tests for `@drizzle/store`\n- `test:store:verbose`: Run only tests for `@drizzle/store` passing verbose flag\n- `test:vue`: Run only tests for `@drizzle/vue-plugin`\n\n\nAdditional Notes\n----------------\n\nJoin the chat in [our community Spectrum\nchannel](https://spectrum.chat/trufflesuite). If anything about this process is\nunclear, or for helpful feedback of any kind, we'd love to hear from you!\n\n**Thanks again for all your support, encouragement, and effort! `drizzle`\nwould not be possible without contributors like you. :bow:**\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrufflesuite%2Fdrizzle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrufflesuite%2Fdrizzle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrufflesuite%2Fdrizzle/lists"}