Enable DOM reconciliation for transformed elements

.github/workflows/ci.yml

@@ -432,13 +432,13 @@ jobs:
       - name: Test Playwright
         run: pnpm run test-e2e-core-ci:${{ matrix.browser }}
 
-      - name: Upload Artifacts
-        if: failure()
-        uses: actions/upload-artifact@v3
-        with:
-          name: Test Results
-          path: test-results/
-          retention-days: 7
+      # - name: Upload Artifacts
+      #   if: failure()
+      #   uses: actions/upload-artifact@v3
+      #   with:
+      #     name: Test Results
+      #     path: test-results/
+      #     retention-days: 7
 
   release:
     name: Publish to NPM

.vscode/settings.json

@@ -5,5 +5,5 @@
   "eslint.alwaysShowStatus": true,
   "eslint.debug": true,
   "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.words": []
+  "cSpell.words": ["dflex", "Jalal", "Maskoun", "pnpm", "VDOM"]
 }

CONTRIBUTING.md

@@ -9,27 +9,18 @@
   for development.
 - Run `pnpm build` in the root directory to build the modules.
 
-## Running Tests
-
-- `pnpm test` to run the tests in each package available in workspace.
-
-## Dealing with packages
-
-- Use `pnpm --filter` followed by DFlex package name in `package.json`.
-  So, If you deal with `dflex/dnd` for example you can use:
-
-  `pnpm --filter @dflex/dnd add -D dotenv`
-
 ## Development
 
 DFlex contains multiple packages that shapes the final product. All Packages are
 decoupled and work separately. Each package has it own universe including test
 and playground or at lease this is the initial plan.
 
-DFlex is written entirely in plain JavaScript/TypeScript and doesn't depend on
-any specific framework. However, it's using the
-[**React**](https://reactjs.org/) for playground and
-[**Cypress**](https://www.cypress.io/) for end to end testing. It's also
+DFlex is written entirely in plain
+JavaScript/[**TypeScript**](https://www.typescriptlang.org/) and doesn't depend
+on any specific framework. However, it's using the
+[**React**](https://reactjs.org/) for playground,
+[**Cypress**](https://www.cypress.io/) and
+[**Playwright**](https://playwright.dev/) for end to end testing. It's also
 using [**Jest**](https://jestjs.io/) for unit testing and
 [**PNPM**](https://pnpm.io/) to manage the packages.
 
@@ -41,42 +32,17 @@ cd dflex
 pnpm install
 ```
 
-This will clone and install all development dependencies. If you are using
-windows you probably have to install cypress manually as following:
-
-```bash
-pnpm cy:install:win
-```
-
 To start development you can use the following command:
 
 ```bash
-pnpm --filter @dflex/dnd server
+pnpm start
 ```
 
 This will run the development playground for the DnD package. Open the browser
 [http://localhost:3001](http://localhost:3001) to see the playground. You can
 check the code in the
-[**packages/dnd/playgrounds**](https://github.com/dflex-js/dflex/blob/dev/update_main_page/packages/dnd/playgrounds/dflex-react-dnd/src/App.tsx)
-to see the available routing.
-
-If you want to change the codebase and live edit the playground you have to
-compile while running the playground. You can use the following command:
-
-```bash
-pnpm --filter @dflex/dnd compile:w
-pnpm --filter @dflex/dnd build:w
-pnpm --filter @dflex/dnd run server
-
-```
-
-After finish editing you can make sure the changes you make are not going to
-break the code. You can do that by running the test and have some fun watching
-Cypress do the job:
-
-```bash
-pnpm --filter @dflex/dnd test
-```
+[**packages/dnd/playgrounds**](https://github.com/dflex-js/dflex/tree/main/packages/dflex-dnd-playground)
+to see the available components and implementation.
 
 ## Submitting a PR
 
@@ -88,3 +54,13 @@ repository.
 3- Make your change.
 
 4- Push to your fork and submit a pull request when ready.
+
+## Before submitting PR
+
+1. Check types `pnpm check-types`
+2. Check unit test `pnpm jest`
+3. Check linter `pnpm lint`
+4. Run playground `pnpm start` then: <br />
+   a. Check smoke test `pnpm playwright test`<br />
+   b. Check essential mechanism `pnpm cy:run:vertical:chrome` <br />
+   c. Check migrating between containers `pnpm cy:run:vertical:chrome`