wordpress-api-wc

Provides <wordpress-api> and window.WordPress, a declarative way to interact with your WordPress site's api through IndexedDB.

Usage no npm install needed!

<script type="module">
  import wordpressApiWc from 'https://cdn.skypack.dev/wordpress-api-wc';
</script>

README

WordPress API Web Component

Super simple, Modern IndexedDB-first WordPress REST API Web Component

Table of Contents

Features

More to come!

Example

First, queue the script: <script src='https://unpkg.com/wordpress-api-wc/dist/wordpress-api.js'></script>

Finally, declare it on your site:

<wordpress-api>
  <!-- Great for mounting an app on demand -->
  <div>Loaded! Start your React/Vue/Choo/whatever app declaratively, here!</div>
</wordpress-api>

Once the component is mounted, it will begin syncing your wordpress database to a local IndexedDB. All interaction with the database will first talk to the IndexedDB, then as a fallback, it will make a network request.

Instantiation and more

<wordpress-api>
  <div>Loaded!</div>
</wordpress-api>


<script>
// This will return the instance of the API
var api = document.querySelector('wordpress-api').api();


// Or, since once the api is mounted, it adds `WordPress` to the window, you can do...
var api = window.WordPress;

// They're both references to the same instance.
// Once you've got your variable set, you can do this...

api.posts.all().then((posts) => {
  console.log(posts);
});

// or with await:
var posts = await api.posts.all();

</script>

Philosophy

It should be absurdly easy to do a Single Page App with offline access. It should be super easy to make your site super performant. You shouldn't have any challenges with interacting with IndexedDB - it should be invisible.

Events

The element will emit these three events:

'mounting'

More to come

'loading'

More to come

'ready'

More to come

Optimizations

PRPL (Getting pertinent content immediately, pulling the rest in the background)

More to come

Using a Web Worker so you don't block the UI Thread

More to come

API

Coming soon!

Installation

Script tag

  • Put a script tag similar to this <script src='https://unpkg.com/wordpress-api-wc/dist/wordpress-api.js'></script> in the head of your index.html
  • Then you can use the element <wordpress-api base-url="https://example.website"></wordpress-api> anywhere in your template, JSX, html etc

Node Modules

  • Run npm install wordpress-api-wc --save
  • Put a script tag similar to this <script src='node_modules/wordpress-api-wc/dist/wordpress-api.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

  • Run npm install wordpress-api-wc --save
  • Add { name: 'wordpress-api-wc' } to your collections
  • Then you can use the element anywhere in your template, JSX, html etc

Support

More to come!

Contributing

MIT

License

MIT

Citations

I absolutely ADORE Choo, and the way the team does their documentation. I did bite this readme format from their readme. It's a fantastic framework and I highly, HIGHLY recommend trying it out!

Built With Stencil