omarluq / stimulus-store Goto Github PK

There is a typo in this line in the README.

Instead of:

When you call useStore(this) in the connect method, the useStore hook will subscriber the controller to all the stores specified in the static stores array.

Should be:

When you call useStore(this) in the connect method, the useStore hook will subscribe the controller to all the stores specified in the static stores array.

Describe the bug
Build workflow expects size lib to be global

To Reproduce
Steps to reproduce the behavior:

1. yarn
2. yarn build

Expected behavior
Lib should build without requiring the installation of size lib globally

Describe the bug
Link in readme to docs is broken (404)

To Reproduce
[Steps to reproduce the behavior:]
In the readme it says to go to: (https://github.com/omarluq/stimulus-store/blob/main/docs/www.stimulus-store.com)

Expected behavior

Screenshots

Environment (please complete the following information):

Additional context

Just trying to get a feel for the project, and see how it could be used.

• Currently the docs are all in the readme file, instead the readme file should be short and cover the introduction to stimulus-store as and idea, installation, contributors, and license.
• Further more every core module in stimulus-store should be documented in a markdown file located in the docs directory, use snake case for file naming
• Add home.md in docs for docsify landing page, home file content should be "the introduction to stimulus-store as and idea" section in the new README.md only
• All docs that must be appear on www.stimulus-store.com must be added to docs/_sidebar.md

Describe the bug
The build process is generating .d.ts files for .ts files but is ignoring standalone .d.ts files. This results in missing type definitions in the output directory.

To Reproduce
Run yarn && yarn run build in root and see generated dist/ directory

Expected behavior
The build process should generate .d.ts files for both .ts files and standalone .d.ts files. For example, given the following source structure:

src/
├── store/
│   ├── store.ts
│   └── someTypeInterface.d.ts

The expected output structure is:

dist/
├── store/
│   ├── store.d.ts
│   └── someTypeInterface.d.ts

Describe the issue with the documentation
The createStore factory supports accepting a promise or a callback that yields back a value of set type for the initialValue arg but the docs does not mentions that

Page Link
createStore

Suggested Change
Document all possible initialValue args

Add an api to bind a store value as data attribute to an html element (within the scope of a controller element)
e.g.

  import { Controller } from '@hotwired/stimulus';
  import { useStore } from 'stimulus-store';
  import { counterStore } from './stores/counter';

  export default class extends Controller {
    static stores = [counterStore]

    connect() {
      useStore(this);
    }
  }

<div controller='my-controller'>
  <div my-controller-counterStore-value=<%= @likes.count %>></div>
</div>

• changes to the store value attribute on the bond element will automatically qualify as a setStoreValue
• if a new element with store attribute enters the dom it will automatically qualify as a setStoreValue

e.g implementation

export function useStore(controller: StoreController) {
  const stores: Store[] | undefined = controller.constructor?.stores;
  // Keep track of MutationObservers to cleanup later
  const mutationObservers: MutationObserver[] = [];

  stores?.forEach((store) => {
      const controllerName: string = controller.identifier.replace(/_/g, '-');
      const storeName: string = camelize(store.name.toString().slice(7, -1), false);
      const attributeToWatch: string = `data-${controllerName}-${storeName}-value`;
      
      // Setup a MutationObserver for each store-related attribute
      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.type === "attributes" && mutation.attributeName === attributeToWatch) {
            // Retrieve the new value from the mutated attribute
            const newValue: StoreValue = mutation.target.getAttribute(attributeToWatch)
            // Update the store with the new value
            store.set(newValue);
          }
        });
      });
  
      // Observe changes in the controller's element and its children
      observer.observe(controller.element, {
        attributes: true,
        subtree: true,
        attributeFilter: [attributeToWatch],
      });
      
      mutationObservers.push(observer);
  }
  
  const originalDisconnect = controller.disconnect.bind(controller);
  controller.disconnect = () => {
    // Disconnect all mutation observers
    mutationObservers.forEach((observer) => observer.disconnect());
    // Call the original disconnect method
    originalDisconnect();
  };
}

Is your feature request related to a problem? Please describe.
Reevaluating the use of Yarn and Rollup. While they are effective, I believe there might benefit from exploring newer tools like pnpm or Bun, particularly in terms of package management and the build process. My goal is to identify if there are more efficient ways to manage dependencies and build the library.

Describe the solution you'd like
I am considering a switch from Yarn to either pnpm or Bun for package management. pnpm is appealing for its efficient node_modules handling, and Bun has been noted for its impressive performance. Furthermore, Bun's integrated bundling capabilities present an intriguing possibility for simplifying the build process, potentially taking over the role currently filled by Rollup. The goal is to streamline workflow and possibly improve build times.