\nInside that directory, it will generate the initial project structure and install the transitive dependencies:\n\n```\nmy-app\n├── README.md\n├── .gitignore\n├── Cargo.toml\n├── index.html\n├── LICENSE-APACHE\n├── LICENSE-MIT\n├── tailwind.config.js\n├── tailwind.css\n├── Trunk.toml\n├── public\n│ ├── favicon.ico\n│ ├── logo.svg\n└── src\n ├── lib.rs\n ├── main.rs\n ├── app\n │ ├── about.rs\n │ ├── home.rs\n │ └── mod.rs\n └── components\n ├── nav.rs\n └── mod.rs\n```\nNo configuration or complicated folder structures, only the files you need to build your app.
\nOnce the installation is done, you can open your project folder:\n\n```sh\ncd my-app\n```\n\nInside the newly created project, you can run some built-in commands:\n\n### `trunk serve`\n\nRuns the app in development mode.
\nOpen [http://localhost:8080](http://localhost:8080) to view it in the browser.\n\nThe page will automatically reload if you make changes to the code.
\nYou will see the build errors and lint warnings in the console.\n\n### `trunk build`\n\nBuilds the app for production to the `dist` folder.
\nIt correctly bundles Yew in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.
\n\nYour app is ready to be deployed.\n\n### `wasm-pack test --headless --chrome`\n\nRuns the test watcher in an interactive mode.
\nBy default, runs tests related to files changed since the last commit.\n\n# Contributing\n\nFeel free to take a look at the current issues in this repo for anything that currently needs to be worked on.\n\nYou are also welcome to open a PR or a new issue if you see something is missing or could be improved upon.\n\n# License\n\nApache License (Version 2.0)\n\nSee [LICENSE](./LICENSE) for details.\n" }, { "path": "crates/yew-app/.gitignore", "content": "# Generated by Cargo\n# will have compiled files and executables\n/target/\n\n# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries\n# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html\nCargo.lock\n\n# These are backup files generated by rustfmt\n**/*.rs.bk\n\n\n# JS\nnode_modules\n/dist\n/pkg\n/wasm-pack.log\n.cache" }, { "path": "crates/yew-app/Cargo.toml", "content": "[package]\nauthors = [\"You
\n \n \n
\n }\n}\n\nasync fn fetch_repo(repo: String) -> Result\n \n { \"Create Yew App\" }\n \n { \", Set up a modern yew web app by running one command.\" }\n
\n\n \n
\n\n {\n if state.loading {\n html! { \"Loading, wait a sec...\" }\n } else {\n html! {}\n }\n }\n
\n {\n if let Some(repo) = &state.data {\n html! {\n <>\n{ \"Repo name: \" }{ &repo.name }
\n{ \"Repo full name: \" }{ &repo.full_name }
\n{ \"Repo description: \" }{ &repo.description }
\n \n }\n } else {\n html! {}\n }\n }\n\n {\n if let Some(error) = &state.error {\n match error {\n Error::DeserializeError => html! { \"DeserializeError\" },\n Error::RequestError => html! { \"RequestError\" },\n }\n } else {\n html! {}\n }\n }\n
\n\n { \"Edit \" } { \"src/app/about.rs\" } { \" and save to reload.\" }\n
\n \n \n
\n }\n}\n"
},
{
"path": "crates/yew-app/src/app/mod.rs",
"content": "use yew::prelude::*;\nuse yew_router::prelude::*;\n\npub mod about;\npub mod home;\n\nuse crate::components::nav::Nav;\nuse about::About;\nuse home::Home;\n\n/// App routes\n#[derive(Routable, Debug, Clone, PartialEq, Eq)]\npub enum AppRoute {\n #[at(\"/about\")]\n About,\n #[not_found]\n #[at(\"/page-not-found\")]\n PageNotFound,\n #[at(\"/\")]\n Home,\n}\n\n/// Switch app routes\npub fn switch(routes: AppRoute) -> Html {\n match routes.clone() {\n AppRoute::Home => html! { \n \n ![\"Yew\"](\"logo.svg\")
\n \n
\n { \"Learn Yew\" }\n
\n\n \n { *counter }\n \n
\n\n { \"Edit \" } { \"src/app/home.rs\" } { \" and save to reload.\" }\n
\n \n render={switch} />\n
\n \n \n
\n }\n}\n"
},
{
"path": "crates/yew-app/src/components/ui/button.rs",
"content": "use yew::prelude::*;\n\n#[derive(Properties, Clone, PartialEq)]\npub struct ButtonProps {\n #[prop_or_default]\n pub onclick: Callback\nPlease refer to its documentation:\n\n- [Quick Overview](https://github.com/jetli/create-yew-app#quick-overview) – How to create a new app.\n- [Creating an App](https://github.com/jetli/create-yew-app#creating-an-app) – How to develop apps bootstrapped with Create Yew App.\n\n## Getting Started\n\n### Install Rust wasm target\n\n```sh\nrustup target add wasm32-unknown-unknown\n```\n\n### Install [Trunk](https://trunkrs.dev)\n\n### Creating an App\n\n```sh\nnpx create-yew-app my-app\ncd my-app\ntrunk serve\n```\n\nThen open [http://localhost:8080/](http://localhost:8080/) to see your app.
\nWhen you’re ready to deploy to production, create a minified bundle with `trunk build`.\n" }, { "path": "packages/create-yew-app/createYewApp.js", "content": "#!/usr/bin/env node\n\n'use strict';\n\nconst { execSync } = require(\"child_process\");\nconst spawn = require('cross-spawn');\nconst chalk = require('chalk');\nconst fs = require(\"fs\");\nconst path = require(\"path\");\nconst cpr = require(\"cpr\");\nconst rimraf = require(\"rimraf\");\n\n// Check if a tool is present.\nfunction isPresent(dep) {\n try {\n execSync(dep, {stdio: 'ignore'});\n return true;\n } catch (err) {\n return false;\n }\n}\n\n// Run a tool\nfunction run(cmd, args, opts) {\n const output = spawn.sync(cmd, args, opts);\n\n if (output.error != null) {\n throw output.error;\n }\n\n if (output.status !== 0) {\n throw new Error(\"Bad error code when running `\" + cmd + \" \" + args.join(\" \") + \"`: \" + output.status);\n }\n}\n\n// Check required tools\nif (!isPresent(\"git --version\")) {\n console.log('\\n git is required, see: https://git-scm.com/downloads');\n process.exit(1);\n}\n\nif (!isPresent(\"cargo --version\")) {\n console.log('\\n Rust/Cargo is required, see: https://www.rust-lang.org/tools/install');\n process.exit(1);\n}\n\nif (!isPresent(\"trunk --version\")) {\n console.log('\\n Trunk is required, see: https://trunkrs.dev');\n process.exit(1);\n}\n\nconst args = process.argv.slice(2);\n\nlet folderName = '.';\n\n// Make a dir for the app\nif (args.length >= 1) {\n folderName = args[0];\n \n if (!fs.existsSync(folderName)) {\n fs.mkdirSync(folderName);\n }\n}\n\nlet rootFolder = path.resolve(folderName);\nlet gitFolder = path.join(folderName, \".git-clone\");\n\nconsole.log();\nconsole.log(` Creating a new Yew app in ${chalk.green(rootFolder)}. `);\nconsole.log();\n\n// This uses --no-tags and --depth 1 in order to make the cloning faster\nrun(\"git\", [\"clone\", \"--no-tags\", \"--depth\", \"1\", \"https://github.com/jetli/create-yew-app.git\", gitFolder]);\n\n// Copies the yew-app folder\ncpr(path.join(gitFolder, \"crates/yew-app\"), folderName, {}, function (err, files) {\n // Removes the git folder regardless of whether cpr succeeded or not\n rimraf.sync(gitFolder);\n\n if (err) {\n throw err;\n\n } else {\n console.log(\" 🦀 Rust + 🕸 WebAssembly + Yew = ❤️ \");\n console.log();\n console.log(\" Installing dependencies... \");\n\n // Install wasm-pack\n if (!isPresent(\"wasm-pack --version\")) {\n run(\"cargo\", [\"install\", \"wasm-pack\"]);\n }\n\n console.log(\" Installed dependencies ✅ \");\n console.log();\n\n // Git init\n run(\"git\", [\"init\"], { cwd: folderName, stdio: 'ignore' });\n\n console.log(\" Initialized a git repository ✅ \");\n console.log();\n\n console.log(` Success! 🎉 Created ${folderName} at ${chalk.green(rootFolder)}`);\n console.log(' Inside that directory, you can run several commands:');\n console.log();\n console.log(chalk.cyan(' trunk serve'));\n console.log(' Starts the development server.');\n console.log();\n console.log(chalk.cyan(' trunk build'));\n console.log(' Bundles the app into static files for production.');\n console.log();\n console.log(chalk.cyan(' wasm-pack test --headless --chrome'));\n console.log(' Starts the test runner.');\n console.log();\n console.log(' We suggest that you begin by typing:');\n console.log();\n console.log(chalk.cyan(' cd'), folderName);\n console.log(chalk.cyan(' trunk serve'));\n console.log();\n console.log(' Happy hacking! 😎 ');\n console.log();\n }\n});" }, { "path": "packages/create-yew-app/index.js", "content": "#!/usr/bin/env node\n\n'use strict';\n\nvar currentNodeVersion = process.versions.node;\nvar semver = currentNodeVersion.split('.');\nvar major = semver[0];\n\nif (major < 8) {\n console.error(\n 'You are running Node ' +\n currentNodeVersion +\n '.\\n' +\n 'Create React App requires Node 8 or higher. \\n' +\n 'Please update your version of Node.'\n );\n process.exit(1);\n}\n\nrequire('./createYewApp');" }, { "path": "packages/create-yew-app/package.json", "content": "{\n \"name\": \"create-yew-app\",\n \"version\": \"0.2.0\",\n \"description\": \"Set up a modern Yew web app by running one command. \",\n \"bin\": {\n \"create-yew-app\": \"./index.js\"\n },\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/jetli/create-yew-app.git\",\n \"directory\": \"packages/create-yew-app\"\n },\n \"files\": [\n \"index.js\",\n \"createYewApp.js\"\n ],\n \"keywords\": [\n \"yew\",\n \"create-yew-app\",\n \"wasm\",\n \"webassembly\",\n \"wasm-bindgen\",\n \"wasm-pack\",\n \"rust\"\n ],\n \"author\": \"Jet Li