diff --git a/.changeset/odd-coats-tease.md b/.changeset/odd-coats-tease.md new file mode 100644 index 00000000000..0a8f92ff407 --- /dev/null +++ b/.changeset/odd-coats-tease.md @@ -0,0 +1,5 @@ +--- +"create-fuels": patch +--- + +feat: make vite the default `create-fuels` template diff --git a/apps/create-fuels-counter-guide/.env.example b/apps/create-fuels-counter-guide/.env.example index 2c6ac505fa1..e9a1ac1f1de 100644 --- a/apps/create-fuels-counter-guide/.env.example +++ b/apps/create-fuels-counter-guide/.env.example @@ -1,2 +1,2 @@ -NEXT_PUBLIC_FUEL_NODE_PORT=4000 -NEXT_PUBLIC_DAPP_ENVIRONMENT=local \ No newline at end of file +VITE_FUEL_NODE_PORT=4000 +VITE_DAPP_ENVIRONMENT=local \ No newline at end of file diff --git a/apps/create-fuels-counter-guide/.eslintignore b/apps/create-fuels-counter-guide/.eslintignore deleted file mode 100644 index 3cf1c8470fb..00000000000 --- a/apps/create-fuels-counter-guide/.eslintignore +++ /dev/null @@ -1 +0,0 @@ -src/sway-api diff --git a/apps/create-fuels-counter-guide/.eslintrc.json b/apps/create-fuels-counter-guide/.eslintrc.json deleted file mode 100644 index 297609cdfb6..00000000000 --- a/apps/create-fuels-counter-guide/.eslintrc.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "next/core-web-vitals", - "ignoreDuringBuilds": true -} diff --git a/apps/create-fuels-counter-guide/.gitignore b/apps/create-fuels-counter-guide/.gitignore index 9e82727fa10..aff61832060 100644 --- a/apps/create-fuels-counter-guide/.gitignore +++ b/apps/create-fuels-counter-guide/.gitignore @@ -1,37 +1,27 @@ -# dependencies -/node_modules -/.pnp -.pnp.js -.yarn/install-state.gz - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? .fuels diff --git a/apps/create-fuels-counter-guide/README.md b/apps/create-fuels-counter-guide/README.md index 6232b0ce71d..1177ed9b02b 100644 --- a/apps/create-fuels-counter-guide/README.md +++ b/apps/create-fuels-counter-guide/README.md @@ -1,4 +1,4 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-fuels`](https://github.com/FuelLabs/fuels-ts/tree/master/packages/create-fuels). +This is a [Vite](https://vitejs.dev/) project bootstrapped with [`create-fuels`](https://github.com/FuelLabs/fuels-ts/tree/master/packages/create-fuels). ## Getting Started diff --git a/apps/create-fuels-counter-guide/eslint.config.js b/apps/create-fuels-counter-guide/eslint.config.js new file mode 100644 index 00000000000..c4bc8f33c0b --- /dev/null +++ b/apps/create-fuels-counter-guide/eslint.config.js @@ -0,0 +1,26 @@ +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' + +export default tseslint.config({ + extends: [js.configs.recommended, ...tseslint.configs.recommended], + files: ['**/*.{ts,tsx}'], + ignores: ['dist'], + languageOptions: { + ecmaVersion: 2020, + globals: globals.browser, + }, + plugins: { + 'react-hooks': reactHooks, + 'react-refresh': reactRefresh, + }, + rules: { + ...reactHooks.configs.recommended.rules, + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +}) diff --git a/apps/create-fuels-counter-guide/fuels.config.ts b/apps/create-fuels-counter-guide/fuels.config.ts index 6d73104e54a..1c0ea70a379 100644 --- a/apps/create-fuels-counter-guide/fuels.config.ts +++ b/apps/create-fuels-counter-guide/fuels.config.ts @@ -1,19 +1,21 @@ // #region fuels-config-file-env import { createConfig } from 'fuels'; import dotenv from 'dotenv'; -import { NODE_URL } from '@/lib'; +import { NODE_URL } from './src/lib'; dotenv.config({ path: ['.env.local', '.env'], }); // If your node is running on a port other than 4000, you can set it here -const fuelCorePort = +(process.env.NEXT_PUBLIC_FUEL_NODE_PORT as string) || 4000; +const fuelCorePort = +(process.env.VITE_FUEL_NODE_PORT as string) || 4000; export default createConfig({ workspace: './sway-programs', // Path to your Sway workspace output: './src/sway-api', // Where your generated types will be saved fuelCorePort, providerUrl: NODE_URL, + fuelCorePath: 'fuels-core', + forcPath: 'fuels-forc', }); // #endregion fuels-config-file-env \ No newline at end of file diff --git a/apps/create-fuels-counter-guide/index.html b/apps/create-fuels-counter-guide/index.html new file mode 100644 index 00000000000..999540e98ed --- /dev/null +++ b/apps/create-fuels-counter-guide/index.html @@ -0,0 +1,16 @@ + + + + + + + + Fuel dApp + + + +
+ + + + \ No newline at end of file diff --git a/apps/create-fuels-counter-guide/next.config.js b/apps/create-fuels-counter-guide/next.config.js deleted file mode 100644 index 91ef62f0db5..00000000000 --- a/apps/create-fuels-counter-guide/next.config.js +++ /dev/null @@ -1,6 +0,0 @@ -/** @type {import('next').NextConfig} */ -const nextConfig = { - reactStrictMode: true, -}; - -module.exports = nextConfig; diff --git a/apps/create-fuels-counter-guide/package.json b/apps/create-fuels-counter-guide/package.json index 690449b96c3..a1d53c885d9 100644 --- a/apps/create-fuels-counter-guide/package.json +++ b/apps/create-fuels-counter-guide/package.json @@ -1,12 +1,14 @@ { "name": "create-fuels-counter-guide", - "version": "0.1.0", "private": true, + "version": "0.1.0", + "type": "module", "scripts": { - "original:dev": "next dev", - "original:build": "next build", + "test": "vitest", + "original:dev": "vite", + "original:build": "tsc -b && vite build", "original:start": "next start", - "original:lint": "next lint", + "original:lint": "eslint .", "fuels:build": "fuels build", "fuels:dev": "fuels dev", "postbuild": "run-s fuels:build original:build" @@ -14,26 +16,34 @@ "dependencies": { "@fuels/connectors": "^0.26.0", "@fuels/react": "^0.26.0", - "fuels": "workspace:*", "@tanstack/react-query": "^5.52.1", + "@tanstack/react-router": "^1.48.1", + "fuels": "workspace:*", "@wagmi/connectors": "^5.1.8", "@wagmi/core": "^2.13.4", "dotenv": "^16.4.5", - "next": "14.2.7", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hot-toast": "^2.4.1", "react-use": "^17.5.1" }, "devDependencies": { + "@eslint/js": "^9.9.1", + "@tanstack/router-plugin": "^1.47.0", "@types/node": "^22.2.0", "@types/react": "^18.3.5", "@types/react-dom": "^18.3", + "@vitejs/plugin-react-swc": "^3.5.0", "autoprefixer": "^10.4.20", "eslint": "^8.57.0", - "eslint-config-next": "14.2.7", + "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-react-refresh": "^0.4.11", + "globals": "^15.9.0", "postcss": "^8", "tailwindcss": "^3.4.10", - "typescript": "~5.4.5" + "typescript": "~5.4.5", + "typescript-eslint": "^8.0.0", + "vite": "^5.4.2", + "vitest": "^1.6.0" } } diff --git a/apps/create-fuels-counter-guide/postcss.config.js b/apps/create-fuels-counter-guide/postcss.config.js index 12a703d900d..2e7af2b7f1a 100644 --- a/apps/create-fuels-counter-guide/postcss.config.js +++ b/apps/create-fuels-counter-guide/postcss.config.js @@ -1,6 +1,6 @@ -module.exports = { +export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, -}; +} diff --git a/apps/create-fuels-counter-guide/src/app/layout.tsx b/apps/create-fuels-counter-guide/src/app/layout.tsx deleted file mode 100644 index 74d0a2f1be4..00000000000 --- a/apps/create-fuels-counter-guide/src/app/layout.tsx +++ /dev/null @@ -1,85 +0,0 @@ -"use client"; - -import { Layout } from "@/components/Layout"; -import "@/styles/globals.css"; -import { FuelProvider } from "@fuels/react"; -import React, { ReactNode, useEffect, useMemo, useState } from "react"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { Provider } from "fuels"; -import { - BakoSafeConnector, - BurnerWalletConnector, - FuelWalletConnector, - FuelWalletDevelopmentConnector, - FueletWalletConnector, - WalletConnectConnector, -} from "@fuels/connectors"; -import { NODE_URL } from "@/lib"; -import { ActiveWalletProvider } from "@/hooks/useActiveWallet"; - -/** - * react-query is a peer dependency of @fuels/react, so we set it up here. - * See https://docs.fuel.network/docs/wallet/dev/getting-started/#installation-1 - */ -const queryClient = new QueryClient(); - -interface RootLayoutProps { - children: ReactNode; -} - -export default function RootLayout({ children }: RootLayoutProps) { - const [isMounted, setIsMounted] = useState(false); - - /** - * Create a Provider instance. - * We memoize it to avoid creating a new instance on every render. - */ - const providerToUse = useMemo(() => Provider.create(NODE_URL), [NODE_URL]); - - useEffect(() => { - setIsMounted(true); - }, []); - - // Only render the component if the page has been mounted. - if (!isMounted) return null; - - return ( - - - - Fuel dApp - - - - - - - {children} - - - - - - - ); -} diff --git a/apps/create-fuels-counter-guide/src/components/Layout.tsx b/apps/create-fuels-counter-guide/src/components/Layout.tsx index 5af8341e045..9874fc97d34 100644 --- a/apps/create-fuels-counter-guide/src/components/Layout.tsx +++ b/apps/create-fuels-counter-guide/src/components/Layout.tsx @@ -1,13 +1,12 @@ import toast, { Toaster } from "react-hot-toast"; import { Link } from "./Link"; import { Button } from "./Button"; -import { CURRENT_ENVIRONMENT, NODE_URL, TESTNET_FAUCET_LINK } from "@/lib"; +import { CURRENT_ENVIRONMENT, NODE_URL, TESTNET_FAUCET_LINK } from "../lib"; import { useConnectUI, useDisconnect } from "@fuels/react"; import { WalletDisplay } from "./WalletDisplay"; -import { useBrowserWallet } from "@/hooks/useBrowserWallet"; -import { useActiveWallet } from "@/hooks/useActiveWallet"; -import { useFaucet } from "@/hooks/useFaucet"; -import Head from "next/head"; +import { useBrowserWallet } from "../hooks/useBrowserWallet"; +import { useActiveWallet } from "../hooks/useActiveWallet"; +import { useFaucet } from "../hooks/useFaucet"; import { bn } from "fuels"; export const Layout = ({ children }: { children: React.ReactNode }) => { @@ -73,12 +72,8 @@ export const Layout = ({ children }: { children: React.ReactNode }) => { return ( <> - - Fuel App - - -
+