wordpress-api-wc
v0.3.6
Published
Provides <wordpress-api> and window.WordPress, a declarative way to interact with your WordPress site's api through IndexedDB.
Downloads
61
Readme
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
License
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!