TEIC / CETEIcean

TEI in HTML5 Custom Elements
BSD 2-Clause "Simplified" License
164 stars 36 forks source link

Isomorphic version #64

Closed raffazizzi closed 1 year ago

raffazizzi commented 1 year ago

Made some changes to allow CETEIcean to run on both the client or on node (by providing an external DOM, e.g. via JSOM)

import { JSDOM } from 'jsdom';
import CETEI from 'CETEIcean';

const jdom = new JSDOM(`<TEI xmlns="http://www.tei-c.org/ns/1.0" />`, {contentType: 'text/xml'});
new CETEI({
  documentObject: jdom.window.document
})

This required to handle the document object as a class property. CETEIcean will look for the document object in this order:

Other minor changes were necessary to make sure the code could be isomorphic, such as better checks before calling window and Node.

I also added a test that runs before build.

ebeshero commented 1 year ago

This looks pretty exciting @raffazizzi ! Glad to see isomorphic JS support.

raffazizzi commented 1 year ago

@hcayless I separated out the preprocessing step that was included in domToHTML5(). This is necessary because a server side implementation will likely not want to use applyBehaviors() on the server and only use it on the client. While applyBehaviors() is its own method, there wasn't an independent method for the preprocessing of the DOM (the code that adds prefixes, data attributes, etc). This latest commit adds the method preprocess() to do just that.

The tests all work after this change, but it may be good to take this version of CETEIcean for a spin in your more complex projects to make sure nothing is broken. Very happy to address any issue that arises.

hcayless commented 1 year ago

Yeah, I don't see any problems on reading the code over. I will try it out and see if anything breaks!

arjanski commented 1 year ago

Hey there, just here to say I'm looking forward to the new version!

Hope there's no technical reason for the PR to not have been merged?

raffazizzi commented 1 year ago

@arjanski new release is here and on npm! https://www.npmjs.com/package/CETEIcean