pp-share

The pp-share feature allows you to create globally shared reactive state that can be accessed and updated from multiple places in your application. This is especially useful for coordinating data or UI state across different components without prop drilling.

Use Cases

  • Share authentication status or user info across your app.
  • Manage a global theme or dark mode toggle.
  • Sync shopping cart totals across header, sidebar, and checkout components.
  • Keep UI notifications or snackbars reactive from anywhere.

Syntax

Call pphp.share(key, initial) in a script block or module. It returns a tuple:
  • A getter function that also holds the current value at .value (e.g. user().value).
  • A setter function that accepts a new value or an updater function.

Behavior

  • The key must be a non-empty string; otherwise, an error is thrown.
  • If you try to use a reserved key (like length or internal system words), an error will prevent collisions.
  • Calling pphp.share multiple times with the same key will reuse the existing reactive state, allowing seamless sharing across files and components.

Example Usage

This example demonstrates sharing a counter across multiple components. Any update from one place will reflect everywhere the shared state is used. 

<div>
  <p>Counter is {{ counter }}</p>
  <button onclick="setCounter(p => p + 1)">Increment</button>
</div>

<!-- In another component or file -->
<script>
  const [counter, setCounter] = pphp.share(0);
</script>

<p>Also showing counter: {{ counter }}</p>

<script>
  const [counter, setCounter] = pphp.share(0);
</script>

The above example shows how you can increment a counter in one component, and instantly reflect that change in any other component that uses the same shared key.

⚠️ Shared state created with pp-share is global and lives for the lifetime of your app. Always use unique and descriptive keys to avoid accidental overlaps.

pp-share with object methods

You can use pp-share to create a globally shared state that is an object with its own set and reset methods. This is very handy to keep logic encapsulated and accessible across different components.

Example Usage

<div>
  <p>Name: {{ user.name }}</p>
  <p>Age: {{ user.age }}</p>

  <button class="btn btn-primary btn-sm mt-2" onclick="setUserData">
    Set User
  </button>
  <button class="btn btn-secondary btn-sm mt-2 ml-2" onclick="resetUser">
    Reset User
  </button>
</div>

<!-- In any other component or file -->
<script>
  const [user, setUser] = pphp.share('user', {
    name: '',
    age: '',
    set(data) {
      this.name = data.name;
      this.age = data.age;
    },
    reset() {
      this.name = '';
      this.age = '';
    }
  });

  export const setUserData = () => {
    user.set({ name: 'Jefferson', age: '29' });
  };

  export const resetUser = () => {
    user.reset();
  };
</script>

⚠️ Because pp-share is global, this user object (with set and reset methods) is accessible and reactive across your entire application. Any changes will reflect instantly wherever it’s used.