2.0

- upgraded to react 18
- replaced webpack with vite
- upgraded to antd 5.0
- replaced jest with vitest
- upgraded eslint

.npmrc

@@ -2,4 +2,4 @@ dev_alias=
 scratch_alias=bass-scratch
 prod_alias=
 
-devPort=8080
+dev_port=8080

.vscode/settings.json

@@ -11,6 +11,5 @@
 },
 "terminal.integrated.env.windows": {
     "SFDX_SET_CLIENT_IDS": "sfdx-vscode"
-},
-"eslint.nodePath": "/Users/jonas/.vscode/extensions/salesforce.salesforcedx-vscode-lwc-45.5.0/node_modules"
+}
 }

README.md

@@ -9,7 +9,7 @@
 - [typescript](https://www.typescriptlang.org/): business in the front, party in the back
 - [antd](https://ant.design/docs/react/introduce): the best thing to come out of China since [the fork](https://en.wikipedia.org/wiki/Fork)
 - [ts-force](https://www.npmjs.com/package/ts-force): generates massive files so you don't have toooo
-- [webpack](https://webpack.github.io/): Does a lot of stuff won't ever fully don't understand
+- [vite](https://vitejs.dev/): Does a lot of stuff won't ever fully don't understand, slightly better than webpack
 - [sfdx-cli](https://developer.salesforce.com/tools/sfdxcli): #nosoftware
 
 ## FEATURES
@@ -19,7 +19,7 @@
 - 1 step build & deploy to orgs
 - supports developer, sandbox, scratch and production orgs
 - type safety and code completion when working with SF objects
-- jest test framework
+- testing with vitest
 - setup for debugging in [vscode chrome debugger](https://github.com/Microsoft/vscode-chrome-debug)
 
 ## GETTING STARTED
@@ -103,9 +103,7 @@ prod_alias=john@acme.com
 
 ### How it works
 
-`webpack-dev-server` compiles and makes your app available @ `https//localhost:PORT`. It incrementally compiles your app as you make changes & [react-hot-loader](https://github.com/gaearon/react-hot-loader) allows modules to be hot reloaded without refreshing the page.
-
-Updates will only show for you and not impact any other users in that environment (until you deploy).
+`vite` compiles and makes your app available @ `https//localhost:PORT`. It incrementally compiles your app as you make changes allows modules to be hot reloaded without refreshing the page.
 
 You can see how this is configured by looking at [`force-app/main/default/pages/App.page`](https://github.com/ChuckJonas/bad-ass-salesforce-stack/blob/e7b7366ca2ad1e13bc9b3a1986ad6148097c2fa2/force-app/main/default/pages/App.page#L17). Basically, we just have two output panels that render conditionally based on the url param `local == 1`.
 
@@ -138,10 +136,6 @@ _Note: You can have multiple VF pages_
 
 **NOTE: If you include other static resources in the `force-app/main/default/staticresources` folder they will get nuked by default. To prevent this, update the `copy-bundle` script **
 
-### antd theme
-
-You can change the antd theme less variables by editing `/styles/ant-theme-vars.less`. Unfortunately, changes here require a webpack restart to show up :(
-
 ### ts-force configuration
 
 This project comes equipped with `ts-force` to allow you typed access to Salesforce Rest API. To use `ts-force`, you must first generate classes for the SObjects you want to work with.
@@ -173,7 +167,7 @@ It is possible to debug right from vscode. To do so:
 
 Overtime, this project has gotten both simpler AND objectively better.
 
-Unfortunately upgrades are currently a very manual process. Over the many different enhancements:
+Unfortunately upgrades are currently a very manual process. Overtime:
 
 - configuration files have been changed & moved around
 - Low Value / High Complexity: features have been removed
@@ -183,35 +177,16 @@ Unfortunately upgrades are currently a very manual process. Over the many differ
 
 I admit, I haven't done a very good job of documenting these changes very well. My goal of keeping this everything as flexible as possible has also made it impossible to move parts of the configuration to upgradable packages.
 
-I've tried to go back and tag `Release` to give a sense of breaking changes, but it's very incomplete.
-
-### Things to consider when upgrading
-
-- Most changes have happened in the following areas:
-  - `package.json` (particularly the `scripts` & `config` sections)
-  - `webpack.config.ts`
-  - `tsconfig.json`
-
-For these files, it's best to first identify any customization of your own and then try to merge them into the latest version from `B.A.S.S.`.
-
-- Lots of files have been moved around. In particular:
-
-  - many files have been moved to `config` folder.
-  - `src` has been renamed to `app`
-
-- Features & dependencies have been removed. Examples:
+### Upgrading to 2.0.0
 
-  - there is no longer an `local` mode as it no longer has any advantages over using `Localhost assets on salesforce`
-  - Redux was removed from the core of this project
-  - Replaced `awesome-typescript-loader` with babel
-  - self-signed cert generation script has been removed (manual instructions are in `config/cert`)
+Version 2.0.0 is a major upgrade to the project. It includes the following changes:
 
-- Runtime dependencies have been upgraded to the latest and greatest. Which likely means breaking changes in these libraries:
-  - react
-  - antd
-  - ts-force
+- Upgrade to React18
+- Replace Webpack with Vite
+- Replacing Jest/Enzyme with Vitest/React Testing Library
+- Upgrade to antd v5 (changes to theming, removes LESS support by default)
 
-In most cases you should just be able to continue using your runtime library versions with the latest version of `B.A.S.S.`.
+The easiest way to upgrade is to start a new project and copy over your files.  
 
 ## OTHER USEFUL STUFF
 
@@ -221,18 +196,18 @@ Highly recommend using vscode (typescript code completion, in editor terminal, e
 
 plugins:
 
-\*
 
 - [Editor Config](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig): auto-set formatting options for everyone
 - [TSlint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint): green squigglies everywhere!
 - [Salesforce Extensions for VS Code](https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode): gives your code completion on your `force-app` and ability to excute commands against the CLI
-- [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest): run tests on save
+- [ViTest](https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer): run tests in vscode
 
 ### helpful linkies
 
 - [typescript deep dive](https://basarat.gitbooks.io/typescript/content/)
 - [react-redux-typescript-guide](https://github.com/piotrwitek/react-redux-typescript-guide)
-- [jest reference](https://facebook.github.io/jest/docs/en/getting-started.html#content)
+- [vite reference](https://vitejs.dev/)
+- [vitest reference](https://vitest.dev/)
 - [sfdx cli reference](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm)
 - [Where to Hold React Component Data: state, store, static, and this](https://medium.freecodecamp.org/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00)
 - [Redux: How to chain async actions](https://github.com/reactjs/redux/issues/1676)

app/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

app/App.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import App from './App';
+import { render, screen, userEvent } from './test/utils';
+
+describe('Simple working test', () => {
+    it('the title is visible', () => {
+        render(<App />);
+        expect(screen.getByText(/Hello B.A.S.S. App/i)).toBeInTheDocument();
+    });
+
+    it('should increment count on click', async () => {
+        render(<App />);
+        userEvent.click(screen.getByRole('button'));
+        expect(await screen.findByText(/count is 1/i)).toBeInTheDocument();
+    });
+});

app/app.tsx

@@ -1,29 +1,18 @@
-import { Card, Drawer, Button } from 'antd';
-import { hot } from 'react-hot-loader'; // needs to be before react!
-import * as React from 'react';
-import { Account } from '@src/generated';
+import React, { useState, useEffect } from 'react';
+import { Card } from 'antd';
+import bassLogo from "./assets/images/bass-logo.jpg";
+import "./App.css";
 
-// example use of file loader to load image
-import bassLogo from '@src/assets/images/bass-logo.jpg';
+import { Account } from '@src/generated';
 
-interface AppState {
-  acc: Account;
-  drawerVisible: boolean;
-}
 
-class App extends React.Component<{}, AppState> {
+function App() {
+  const [count, setCount] = useState(0);
 
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      acc: null,
-      drawerVisible: false,
-    };
-  }
 
-  public async componentDidMount() {
-    // example account with contacts query
-    const accs = await Account.retrieve((fields) => {
+  const [account, setAccount] = useState<Account>(null);
+  useEffect(() => {
+    Account.retrieve((fields) => {
       return {
         select: [
           ...fields.select('id', 'name', 'website'),
@@ -35,52 +24,38 @@ class App extends React.Component<{}, AppState> {
         ],
         limit: 1,
       };
+    }).then((accs) => {
+      if (accs.length > 0) {
+        setAccount( accs[0] );
+      }
     });
-    if (accs.length > 0) {
-      this.setState({ acc: accs[0] });
-    }
-  }
+  }, []);
 
-  public render() {
-    return (
-      <Card title='B.A.S.S.'>
-        <Drawer
-          visible={this.state.drawerVisible}
-          onClose={() => this.setState({drawerVisible: false})}
-          title='An Account'
-          width={600}
-        >
-          {this.state.acc && this.renderDrawerContent()}
-        </Drawer>
-        <img width={300} src={bassLogo} />
-        <br />
-        <Button type='primary' onClick={() => this.setState({drawerVisible: true})}>Click Me!</Button>
-      </Card>
-    );
-  }
 
-  private renderDrawerContent = () => {
-    const { acc } = this.state;
-
-    const contactsList = acc.contacts.map((c) => {
-      return (
-        <Card type='inner' key={c.id}>
-          <p><b>Name:</b> {c.name}</p>
-          <p><b>Email:</b> {c.email}</p>
-          <p><b>Phone:</b> {c.phone}</p>
-        </Card>
-      );
-    });
-    return (
-      <div>
-        <p><b>Name:</b> {acc.name}</p>
-        <p><b>Website:</b> {acc.website}</p>
-        <Card title='Contacts' extra={acc.contacts.length}>
-          {contactsList}
-        </Card>
+  return (
+    <div className="App">
+      <Card>
+        <a href="https://github.com/ChuckJonas/bad-ass-salesforce-stack" target="_blank">
+          <img src={bassLogo} className="logo react" alt="isa-fiish" />
+        </a>
+      </Card>
+      <h1>Hello B.A.S.S. App</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
       </div>
-    );
-  }
+      <p className="read-the-docs">
+        Click on the B.A.S.S.logo to learn more
+      </p>
+
+      <p>Account: {account?.name}</p>
+
+    </div>
+  );
 }
 
-export default hot(module)(App);
+export default App;