wordpress-api-wc

WordPress API Web Component

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

Table of Contents

• Features
• Example
• Philosophy
• Events
• Optimizations
• API
• Installation
• Support
• Contributing
• License
• Citations

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!