Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pick up a script loader and provide as a optional Compoent #92

Closed
tomchentw opened this issue Aug 8, 2015 · 9 comments
Closed

Pick up a script loader and provide as a optional Compoent #92

tomchentw opened this issue Aug 8, 2015 · 9 comments

Comments

@tomchentw
Copy link
Owner

Why

Inspired by #81 , I think it would be great if we could provide a <Component> that will load this module.

Candidates

https://tomchentw.github.io/xrossref/#ZG96b2lzY2gvcmVhY3QtYXN5bmMtc2NyaXB0LCBzeXN0ZW1qcy9zeXN0ZW1qcywgZGVkL3NjcmlwdC5qcywgU2xleEF4dG9uL3llcG5vcGUuanMsIGdldGlmeS9MQUJqcywgd2Vzc21hbi9kZWZlci5qcw==

Thoughts

Since System.js seems to be the best, future proof library ATM, I think it would be great to implement this feature with it. However, it seems to be too overkilled for a simple feature to use ~13KB in minified, ungzipped bundle.

I was thinking if we could provide a tiny polyfill when System is not exist:

const loadScript = System.import || function (url) {
  return new Promise((resolve, reject) => {
    // add <script> tag to <head> and resolve when loaded.
  });
}
// Use it like this
loadScript("https://maps.googleapis.com/maps/api/js").then(fn);

Is this polyfill matches what System.js do? Or will there be any problem associate with it?

References

https://github.com/whatwg/loader/issues/43
https://github.com/systemjs/systemjs/issues/384
@tomchentw tomchentw changed the title Pick up a script loader and provide optionally as a module Pick up a script loader and provide as a optional Compoent Aug 8, 2015
@tomchentw tomchentw mentioned this issue Aug 9, 2015
Closed
@tomchentw tomchentw self-assigned this Aug 9, 2015
@Qrysto
Copy link

Qrysto commented Aug 21, 2015

+1. I've been using react-async-script for loading googlemaps API and it worked fine before I updated to react-google-maps v2. I'm against adding a script tag to load googlemaps API, it's against reactjs's modular structure, so I think react-google-maps itself should provide a way to load googlemaps API or at least play well with 3rd party async script loaders.

@tomchentw
Copy link
Owner Author

Thanks for the info of react-async-script. I believe it's suitable for our usage. I will look at it soon.

@Bazze
Copy link

Bazze commented Sep 7, 2015

Hey! Any progress on this?

@Qrysto
Copy link

Qrysto commented Sep 24, 2015

How is this progressing?

tomchentw added a commit that referenced this issue Oct 8, 2015
@tomchentw
feat(ReactAsyncScriptGoogleMap): add "react-async-script" support
8b91955 
* Ref #92
tomchentw added a commit that referenced this issue Oct 12, 2015
@tomchentw
feat(ReactAsyncScriptGoogleMap): add "react-async-script" support
f7228cc 
* Ref #92
@tomchentw
Copy link
Owner Author

Okay. Right now I could add another async.html.js endpoint to examples/gh-pages to demonstrate async loaded scripts. Here's the current result:

Branch

http://git.io/v4nVz

Screenshot

screen shot 2015-10-12 at 10 36 56 am

The error in the web console shows that async loaded google.maps script will fail due to document.write API.

Reason for that

We use react-async-script to load the Google Map API v3. However, inside the code, the script.async flag is set to 1 and cannot change by props. (REF: http://git.io/vCWHB).

11/16/2015 Update

Releases scriptjs version and pending this branch. Update branch URL.

tomchentw added a commit that referenced this issue Nov 10, 2015
@tomchentw
feat(ReactAsyncScriptGoogleMap): add "react-async-script" support
ce55dd0 
* Ref #92
tomchentw added a commit that referenced this issue Nov 13, 2015
@tomchentw
feat(ScriptjsGoogleMap): add "scriptjs" support
aea6c8e 
* Ref #92
tomchentw added a commit that referenced this issue Nov 16, 2015
@tomchentw
feat(ScriptjsGoogleMap): add "scriptjs" support
b80b731 
* Ref #92
tomchentw added a commit that referenced this issue Nov 16, 2015
@tomchentw
fix(package.json): scriptjs should exist in dependencies
4f3304c 
* Ref #92
tomchentw added a commit that referenced this issue Nov 16, 2015
@tomchentw
feat(ReactAsyncScriptGoogleMap): add "react-async-script" support
500febf 
* Ref #92
@tomchentw
Copy link
Owner Author

Guys, I've added a new component called < ScriptjsGoogleMap /> using scriptjs to load google maps API v3. The example can be seen on gh-pages:
https://tomchentw.github.io/react-google-maps/async/

Please check it out and let me know any issues, thanks! You can use the version of 4.3.1

@tstavinoha
Copy link

Using the async script loading internally does not expose important constants like MapTypeId.TERRAIN to map parent component. It makes it unconvenient to set up the map.

Could the default options be set via callback that recieves the maps api reference after loading?

@tomchentw
Copy link
Owner Author

@tstavinoha consider using the callback query parameter in the query props? This is the standard way by Google Maps JavaScript API v3 to handle the "loaded" event. Notice that it has to be a global variable.

@tomchentw tomchentw mentioned this issue Nov 19, 2015
Closed
tomchentw added a commit that referenced this issue Nov 19, 2015
@tomchentw
feat(async/ScriptjsLoader): rename from async/ScriptjsGoogleMap
d1a1960 
* Closes #145
* Ref #92

BREAKING CHANGE: rename from async/ScriptjsGoogleMap to async/ScriptjsLoader and changed behavior from wrapping to delegation of GoogleMap element

To migrate the code follow the example below (extracted from examples/gh-pages migration):

Before:

<ScriptjsLoader
   hostname={"maps.googleapis.com"}
   pathname={"/maps/api/js"}
   query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,dr
awing,places"}}
   }
  // <GoogleMap> props
  defaultZoom={3}
  defaultCenter={{lat: -25.363882, lng: 131.044922}}
  onClick={::this._handle_map_click}
/>

After:

<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}

  googleMapElement={
    <GoogleMap
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this._handle_map_click}
    />
  }
/>
tomchentw added a commit that referenced this issue Nov 19, 2015
@tomchentw
feat(async/ScriptjsLoader): replacement of async/ScriptjsGoogleMap
11ab7d7 
* Mark async/ScriptjsGoogleMap as deprecated
* Closes #145
* Ref #92

BREAKING CHANGE: migrate from async/ScriptjsGoogleMap to async/ScriptjsLoader and changed its behavior from implicit inheritance to simple delegation

To migrate the code follow the example below (extracted from examples/gh-pages migration):

Before:

<ScriptjsLoader
   hostname={"maps.googleapis.com"}
   pathname={"/maps/api/js"}
   query={{v: `3.exp`, libraries: "geometry,dr
awing,places"}}
   }
  // <GoogleMap> props
  defaultZoom={3}
  defaultCenter={{lat: -25.363882, lng: 131.044922}}
  onClick={::this._handle_map_click}
/>

After:

<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.exp`, libraries: "geometry,drawing,places"}}

  googleMapElement={
    <GoogleMap
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this._handle_map_click}
    />
  }
/>
tomchentw added a commit that referenced this issue Nov 19, 2015
@tomchentw
feat(async/ScriptjsLoader): replacement of async/ScriptjsGoogleMap
f1773ba 
* Mark async/ScriptjsGoogleMap as deprecated
* Closes #145
* Ref #92

BREAKING CHANGE: migrate from async/ScriptjsGoogleMap to async/ScriptjsLoader and changed its behavior from implicit inheritance to simple delegation

To migrate the code follow the example below (extracted from examples/gh-pages migration):

Before:

```js
<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.exp`, libraries: "geometry,drawing,places"}}
  //
  // <GoogleMap> props
  defaultZoom={3}
  defaultCenter={{lat: -25.363882, lng: 131.044922}}
  onClick={::this._handle_map_click}
/>
```

After:

```js
<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.exp`, libraries: "geometry,drawing,places"}}
  //
  googleMapElement={
    <GoogleMap
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this._handle_map_click}
    />
  }
/>
```
tomchentw added a commit that referenced this issue Nov 21, 2015
@tomchentw
feat(async/ScriptjsLoader): replacement of async/ScriptjsGoogleMap
ccfadd4 
* Mark async/ScriptjsGoogleMap as deprecated
* Closes #145
* Ref #92

BREAKING CHANGE: migrate from async/ScriptjsGoogleMap to async/ScriptjsLoader and changed its behavior from implicit inheritance to simple delegation

To migrate the code follow the example below (extracted from examples/gh-pages migration):

Before:

```js
<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.exp`, libraries: "geometry,drawing,places"}}
  //
  // <GoogleMap> props
  defaultZoom={3}
  defaultCenter={{lat: -25.363882, lng: 131.044922}}
  onClick={::this._handle_map_click}
/>
```

After:

```js
<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.exp`, libraries: "geometry,drawing,places"}}
  //
  googleMapElement={
    <GoogleMap
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this._handle_map_click}
    />
  }
/>
```
tomchentw added a commit that referenced this issue Nov 22, 2015
@tomchentw
feat(ScriptjsLoader): new behavior will render GoogleMapLoader instead
0f100d8 
* Ref #92

BREAKING CHANGE: ScriptjsLoader will delegate to GoogleMapLoader when the script is loaded

Before:

```js
<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}
  loadingElement={
    <div {...this.props} style={{ height: "100%" }}>
      <FaSpinner />
    </div>
  }
  googleMapElement={
    <GoogleMap
      containerProps={{
        ...this.props,
        style: {
          height: "100%",
        },
      }}
      ref={googleMap => {
        // Wait until GoogleMap is fully loaded. Related to #133
        setTimeout(() => {
          googleMap && console.log(`Zoom: ${ googleMap.getZoom() }`);
        }, 50);
      }}
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this.handleMapClick}
    >
      <Marker
        {...this.state.marker}
        onRightclick={this.handleMarkerRightclick}
      />
    </GoogleMap>
  }
/>
```

After:

```js
<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}
  loadingElement={
    <div {...this.props} style={{ height: "100%" }}>
      <FaSpinner />
    </div>
  }
  containerElement={
    <div {...this.props} style={{ height: "100%" }} />
  }
  googleMapElement={
    <GoogleMap
      ref={googleMap => {
        googleMap && console.log(`Zoom: ${ googleMap.getZoom() }`);
      }}
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this.handleMapClick}
    >
      <Marker
        {...this.state.marker}
        onRightclick={this.handleMarkerRightclick}
      />
    </GoogleMap>
  }
/>
```
@tomchentw tomchentw mentioned this issue May 29, 2016
Open
@tomchentw
Copy link
Owner Author

Close for now.

We're also looking for maintainers. Involve in #266 to help strengthen our community!

@tomchentw tomchentw removed their assignment May 29, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@tomchentw @Bazze @Qrysto @tstavinoha