AmplifyJS Client-Side Storage & Messaging

Common errors

• Uncaught ReferenceError: amplify is not defined

  cause The AmplifyJS library was not loaded correctly or was loaded after the script attempting to use it, or an ES Module `import` was used.
  fix Ensure `amplify.min.js` is included via a `<script>` tag in your HTML `head` or `body` *before* any other JavaScript code tries to access the `amplify` global object. Do not use `import` or `require`.

• TypeError: Cannot read properties of undefined (reading 'store') (or similar for 'publish', 'subscribe', etc.)

  cause Similar to 'amplify is not defined', this indicates the `amplify` global object was not present when its methods were called, often due to incorrect script loading order or an environment where the global object isn't available (e.g., Node.js without a JSDOM-like setup).
  fix Verify the `<script src="path/to/amplify.min.js">` tag is correctly placed and accessible in the HTML. Ensure that no other script is overwriting the global `amplify` variable.

Warnings

• breaking AmplifyJS is an abandoned library. It has not received updates, bug fixes, or security patches since 2012 (version 1.1.2). Using it in production applications poses significant security risks and will lead to compatibility issues with modern browsers and frameworks.
  Fix: Migrate to a modern client-side storage solution (e.g., `localStorage`, `sessionStorage`, libraries like `localForage` or framework-specific state management) and a dedicated pub/sub or event bus library if needed. Avoid using AmplifyJS entirely.
• gotcha AmplifyJS does not support modern JavaScript module systems (ESM or CommonJS). It must be included via a global <script> tag. Attempts to `import` or `require` it will fail, as it does not provide module exports.
  Fix: Always include `amplify.min.js` directly in your HTML with a `<script>` tag before any code that attempts to use the `amplify` global object.
• gotcha The global `amplify` object can conflict with other scripts or libraries that define a global variable of the same name. This is a common issue with older libraries that pollute the global namespace.
  Fix: There is no built-in `noConflict` mode. If a conflict occurs, you must manually refactor one of the conflicting libraries or wrap AmplifyJS in an immediately invoked function expression (IIFE) to limit its scope, although this would prevent its intended global access.
• deprecated The `amplify.request` component, designed for AJAX requests, is severely outdated. It lacks modern features like Promises, `fetch` API compatibility, and robust error handling found in modern HTTP clients (e.g., Axios, `fetch` API).
  Fix: Use the native `fetch` API or a well-maintained HTTP client library like Axios, ky, or superagent for network requests. Do not use `amplify.request`.

Install

• npm install amplifyjs npm
• yarn add amplifyjs yarn
• pnpm add amplifyjs pnpm

Imports

• amplify
  wrong:

  import * as amplify from 'amplifyjs';
  // OR
  const amplify = require('amplifyjs');

  correct:

  <script src="path/to/amplify.min.js"></script>
  <script>
    // 'amplify' object is now globally available
    amplify.store('myKey', 'myValue');
  </script>

  AmplifyJS is a legacy browser-only library that exposes a global 'amplify' object when included via a <script> tag. It does not support modern ES Module (import) or CommonJS (require) syntax. Attempts to import it will fail.
• amplify.store

  <script src="path/to/amplify.min.js"></script>
  <script>
    amplify.store('username', 'Alice', { expires: 3600000 }); // Store for 1 hour
    const user = amplify.store('username');
    console.log(user);
  </script>

  The `amplify.store` method is accessed directly from the global `amplify` object for client-side persistent storage. It provides methods for setting, getting, and removing data with optional expiration.
• amplify.publish, amplify.subscribe

  <script src="path/to/amplify.min.js"></script>
  <script>
    amplify.subscribe('dataUpdated', function(data) {
      console.log('Received data:', data);
    });
  
    amplify.publish('dataUpdated', { id: 1, message: 'Hello' });
  </script>

  The pub/sub methods `amplify.publish` and `amplify.subscribe` are also accessed via the global `amplify` object, enabling basic event-driven communication within the browser environment.

Quickstart

This quickstart demonstrates how to include AmplifyJS via a <script> tag and utilize its primary features: `amplify.store` for setting, getting, and removing client-side data, and `amplify.publish`/`amplify.subscribe` for a basic publish-subscribe messaging pattern within the browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AmplifyJS Quickstart</title>
    <!-- It is crucial to download amplify.min.js and serve it locally -->
    <!-- For demonstration, assume it's in the same directory -->
    <script src="./amplify.min.js"></script>
</head>
<body>
    <h1>AmplifyJS Demo</h1>
    <p>Check the browser console for output from amplify.store and amplify.pub/sub.</p>

    <script>
        // 1. Using amplify.store for client-side storage
        console.log('--- Amplify.store Demo ---');
        amplify.store('myAppState', { theme: 'dark', userId: 'testUser123' }, { expires: 60000 }); // Store for 1 minute
        let storedData = amplify.store('myAppState');
        console.log('Stored initial state:', storedData);

        // Update a value
        storedData.theme = 'light';
        amplify.store('myAppState', storedData);
        console.log('Updated state:', amplify.store('myAppState'));

        // Remove a value after some time (or explicitly)
        setTimeout(() => {
            amplify.store('myAppState', null); // Setting to null clears the key
            console.log('State after 2 seconds (should be null):', amplify.store('myAppState'));
        }, 2000);

        // 2. Using amplify.publish/subscribe for messaging
        console.log('\n--- Amplify.publish/subscribe Demo ---');
        amplify.subscribe('userLoggedIn', function(userData) {
            console.log(`User ${userData.name} (ID: ${userData.id}) logged in!`);
        });

        amplify.subscribe('userLoggedIn', function(userData, timestamp) {
            console.log(`[Logger] Event received at ${new Date(timestamp).toLocaleTimeString()}`);
        });

        console.log('Publishing userLoggedIn event...');
        amplify.publish('userLoggedIn', { name: 'Jane Doe', id: 'jane_d' }, Date.now());

        // Unsubscribe after some time
        const handlerToUnsubscribe = function(msg) { console.log('This handler will be unsubscribed:', msg); };
        amplify.subscribe('tempEvent', handlerToUnsubscribe);
        amplify.publish('tempEvent', 'First message for tempEvent');
        amplify.unsubscribe('tempEvent', handlerToUnsubscribe);
        amplify.publish('tempEvent', 'Second message (should not be seen)');

    </script>
</body>
</html>